React：Antd中Form + Upload 使用

  • Z时代
  • 2024-01-10
  • 分类：综合

react

使用

初学者开始可能会不清楚 Form.Item（需要设置 name 属性） 怎么获取子节点的值，这里说明一下：

  • Form.Item 从子节点的 value 属性值获取，例子：input

  • Form.Item 设置了 getValueProps 或 valuePropName 属性，比如设置了 valuePropName={'checked'} ，则会从子节点的 checked 属性中去获取，例子：Switch

  • 如果子节点没有 value 属性，而且从其他属性也无法获取到需要发送给后端的值，怎么办？通过 onChange 方法，或 trigger 属性指定的名称方法。由于 Form.Item 会自动向子节点传入 props ：value 属性（或 valuePropName 指定的其他属性），onChange 方法（或 trigger 指定的其他名称）。所以可以在子节点调用 props.onChange(value) 方法来传递 value 值。onChange 传入的参数即该 Form.Item 会向后端发送的值。

官方说明

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

  • 你不再需要也不应该用 onChange 来做数据收集同步（你可以使用 Form 的 onValuesChange），但还是可以继续监听 onChange 事件。

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

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

以上是 React：Antd中Form + Upload 使用 的全部内容， 来源链接： utcz.com/z/383326.html

回到顶部