AntD中input和form組件的問題

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