AntD中input和form组件的问题

Posted 2021-03-07 geter

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>
）}}