getFieldDecorator如何优雅的继续监听 onChange

1,515 阅读1分钟

1、问题描述

在getFieldDecorator 包裹的class组件中,重写了onChange以便做一些逻辑处理,并且父组件需要监听onChange 做部分业务操作;个人认为多了一个无用的中间onValChange

image.png

image.png

antd 对 getFieldDecorator的描述

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

  1. 不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。
  2. 你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 里的 initialValue
  3. 你不应该用 setState,可以使用 this.props.form.setFieldsValue 来动态改变表单值。

注意点:本身antd已经提供可在父级监听onChange,只是写法上被覆盖

怎么写优雅一点

1、保留其父级的config.onChange写法,改变其子组件的写法

image.png

2、父级直接传入onChange,子组件使用antd表单控件会自动添加 value(或 valuePropName 指定的其他属性) onChange

image.png

image.png