AntD中input的小坑
在用antd中我把input封装成的一个用来修改内容的小组件(input输入框的内容会根据从修改的内容展现默认值),当我使用了defaultValue这个属性 不管传值怎么变化这个defaultValue属性只有在第一次渲染的时候生效 随后的渲染一直用的时缓存中的数据。
因为每次打开组件的时候我需要跟新input中的值的 我就在input中添加了defaultValue这个属性 就出现了状态不更新的问题了
<Input defaultValue={this.props.name} />
随后看的form中api , 可以通过form组件的setFieldsValue 对数据进行重置 setFieldsValue ({name:‘value‘}) ,因为我的这个项目中没用用到redux 和react hooks 就用了 状态管理比较轻便的一个小项目 如果你是通过class 构建的Components就通过ref来获取 from(antd)组件的数据域 => formRef = React.createRef();
如果你用的是hooks可以用 form = Form.useForm();来获取数据域
class Model extends Component{
formRef = React.createRef();
render(){
return(
<Form ref={this.formRef}>
<Form.Item name="username" >
<Input/>
</Form.Item>
</Form>
)}}
我的是通过props传递的数据我应该在什么时候重置呢?刚一开始我想着肯定不能在组件创建的时候更新
就只能是在组件被调用运行的时候
首先想到的是父组件更新porps,尝试在 componentWillReceiveProps() 这个钩子函数中重置但是没有发生可能指form中的缓存机制
尝试在 componentWillUpdate() 这个钩子函数中实在render()之前执行的所有这个也失败了
当在 componentDidUpdate() 执行成功了这个歌可能是因为在antd中的缓存在render()中把默认值给渲染的我们在这个周期中重置form就可以了
class Model extends Component{ formRef = React.createRef();
onFill = () => {
this.formRef.current.setFieldsValue({
username: this.props.name,
});
};
componentDidUpdate(){
this.onFill()
}
render(){ return( <Form ref={this.formRef}> <Form.Item name="username" > <Input/> </Form.Item> </Form> )}}
原文地址:https://www.cnblogs.com/geter/p/12427452.html