首頁(yè) 猿問(wèn) antd initialValue...

antd initialValue 的值改變不重新渲染清空輸入的表單數(shù)據(jù)

JavaScript

牛魔王的故事 2018-11-13 14:38:14

題目描述我在做項(xiàng)目的時(shí)候發(fā)現(xiàn) antd initialValue 的值改變了輸入的表單數(shù)據(jù)并不會(huì)隨之變化當(dāng)我這樣操作把searchFormData.loginName的值改變 initialValue: searchFormData.loginName, 原來(lái)輸入的表單數(shù)據(jù)并不會(huì)清空更新奇怪的是當(dāng)我這樣寫initialValue: Math.random(), 數(shù)據(jù)又會(huì)更新現(xiàn)在我又一個(gè)刷新頁(yè)面的操作的需求但是又沒有用到路由刷新頁(yè)面是一個(gè)全局按鈕我把這里的state全部清空來(lái)實(shí)現(xiàn)刷新的操作但是即使state為空了已經(jīng)輸入的表單的內(nèi)容并不會(huì)清空而p標(biāo)簽的內(nèi)容已經(jīng)清空題目來(lái)源及自己的思路我的刷新操作是在頂級(jí)組件上操作的，所以沒辦法調(diào)用子孫級(jí)別的 this.props.form.resetFields(); 方法去清空相關(guān)代碼// 請(qǐng)把代碼文本粘貼到下方（請(qǐng)勿用圖片代替代碼）<p>{searchFormData.loginName}</p> <FormItem label="登錄名稱" {...formItemLayout}> {getFieldDecorator('loginName', { initialValue: searchFormData.loginName, })( <Input defaultValue={searchFormData.loginName} /> )} </FormItem>你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？我希望當(dāng)我把 state 清空 input里面原來(lái)輸入的內(nèi)容也清空掉，但是我不想用每個(gè)input去寫onchang事件，因?yàn)楸容^多

查看完整描述

1 回答

MMMHUHU

TA貢獻(xiàn)1834條經(jīng)驗(yàn) 獲得超8個(gè)贊

通過(guò)使用 onFieldsChange 與 mapPropsToFields，可以把表單的數(shù)據(jù)存儲(chǔ)到上層組件或者 Redux、dva 中，更多可參考 rc-form 示例。

注意：mapPropsToFields 里面返回的表單域數(shù)據(jù)必須使用 Form.createFormField 包裝。

Form.create({
  onFieldsChange(props, changedFields) {    props.onChange(changedFields);
  },
  mapPropsToFields(props) {    return {
      username: Form.createFormField({
        ...props.username,
        value: props.username.value,
      }),
    };
  },
  onValuesChange(_, values) {
    console.log(values);
  },
})

1 反對(duì) 回復(fù) 2018-11-13