为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

叮当猫咪 2019-03-07 12:15:04
自定义了一个表单元素,其他正常,在调用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
查看完整描述

2 回答

?
月关宝盒

TA贡献1772条经验 获得超5个赞

是我自己写的组件有问题, 

componentWillReceiveProps(nextProps) {


    if (nextProps.value) { //  这个判断阻止了重置           

        this.setState({

            value: nextProps.value,

        });

    }

}


查看完整回答
反对 回复 2019-03-21
?
慕尼黑8549860

TA贡献1818条经验 获得超11个赞

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

resetFields({...});
setValueForMyForm({value: ''});


查看完整回答
反对 回复 2019-03-21
  • 2 回答
  • 0 关注
  • 2522 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信