ant design 无法重置自定义表单元素

自定义了一个表单元素,其他正常,在调用resetFields的时候其他表单元素能正常重置,自定义的无法重置,请问要怎么样才能和其他表单元素一样重置

import React from 'react'
import {Input, Button, Icon} from 'antd'

class QueryInput extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '',
        }
    }

    componentWillMount() {
        if (this.props.value) {
            this.setState({
                value: this.props.value,
            });
        }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.value) {
            this.setState({
                value: nextProps.value,
            });
        }
    }

    triggerChange = (value) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange
        if (onChange) {
            onChange(value)
        }
    }

    onChange = (e) => {
        const value = e.target.value
        this.setState({ value })
        this.triggerChange(value)
    }

    clear = () => {
        this.setState({ value: '' })
        this.triggerChange('')
    }

    

    render() {
        const {
            value: defaultValue,
            disabled,
            placeholder,
            size,
            width,
            onPressEnter,
            type,
            className,
            style
        } = this.props
        return (
            <Input
                type={ type || 'text' }
                onChange={ this.onChange }
                defaultValue={ defaultValue }
                value={ this.state.value }
                placeholder={placeholder}
                disabled={ disabled }
                onPressEnter={ onPressEnter }
                style={ style || { width: '140px' } }
                className={ className }
                size={ size || 'default' }
                suffix={ <Icon type='close' style={{ cursor: 'pointer' }} onClick={ this.clear } /> }
            />
        )
    }
}

export default QueryInput
阅读 5.2k
2 个回答

是我自己写的组件有问题,
componentWillReceiveProps(nextProps) {

    if (nextProps.value) { //  这个判断阻止了重置           
        this.setState({
            value: nextProps.value,
        });
    }
}

在执行resetFileds的时候,给自定义表单设置一下value的值就可以了。

resetFields({...});
setValueForMyForm({value: ''});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题