ant design Input动态赋值

需求是关闭弹框时候,Input动态赋值,并且再次再次赋值,但是ant design Input直接使用value赋值是不成功的,想了很多办法,然后翻看官网看到,如果在Form-Item里面时,赋值是需要使用setFieldsValue进行赋值,如下

被设置了 name 属性的 Form.Item 包装的控件,表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:

  1. 你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。

  2. 你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。

  3. 你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。

//创建表单ref,放在需要进行赋值的form里
formRef = React.createRef()
//name是Form.Item写入的name值,value为需要赋值的值
this.getData = () => {
     this.formRef.current.setFieldsValue({
         'name':value
     })
}
this.getData()} />

 如果用Input唤出对话框计算值后返回给Input,但是触发还是没地方写的时候,可以给onFocus写入赋值函数,亲测已解决当下问题。

你可能感兴趣的:(react,javascript)