antd design中使用getValueFromEvent转换onChang回传的数据

Daming 2020-07-01
0条评论 161 次浏览
Daming 2020-07-010条评论 161 次浏览

开发了一个图片上传组件,需要在Form中使用getFieldDecorator将组件包装,图片上传组件 通过onChange属性将数据回传到外边。

一段官网的相关参考:

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

你不再需要也不应该用 onChange 来做同步,但还是可以继续监听 onChange 等事件。

你不能用控件的 value defaultValue 等属性来设置表单域的值,默认值可以用 getFieldDecorator 里的 initialValue。
你不应该用 setState,可以使用 this.props.form.setFieldsValue 来动态改变表单值。

在公司的业务中,有的地方需要图片的id,有的地方需要图片的url,因此图片上传组件传入onChange回调的参数是一个对象,里边包含了了id,url等属性。通过上面的文档可以知道 经过 getFieldDecorator 包装的控件 onChange等已经被接管以实现自动绑定,但是上传图片组件返回的是一个对象,而业务中是需要id或者url。由于我们依然可以监听onChange,于是在onChange中我使用setTimeout来实现了这个需求:

    {getFieldDecorator('url', {
                  initialValue: QrData.url,
                  getValueFromEvent: obj => obj.url,
                  rules: [
                    {
                      required: true,
                      message: '必须上传二维码',
                    },
                  ],
                })(
                  <AssetPreviewer
                    bundleId="xxx"
                    categoryKey="cn-img"
                    tips="点击 Asset Library 在资源库中选择或上传二维码"
                    onChange={item => {
                     setTimeout(() => {
                       props.form.setFieldsValue({
                         url: item.url,
                       });
                    }, 100);
                  }}
                    simpleUpload
                  />,
                )}

当然这并不是个好办法,在文档中找到了getValueFromEvent这个api:

options.getValueFromEvent 可以把 onChange 的参数(如 event)转化为控件的值

通过这个api就可以对onChange传回的数据进行处理并转换为控件的值:

      <Form.Item label="二维码">
                {getFieldDecorator('url', {
                  initialValue: QrData.url,
                  getValueFromEvent: obj => obj.url, // 获取到对象中的url
                  rules: [
                    {
                      required: true,
                      message: '必须上传二维码',
                    },
                  ],
                })(
                  <AssetPreviewer
                    bundleId="cxxx"
                    categoryKey="cn-img"
                    tips="点击 Asset Library 在资源库中选择或上传二维码"
                    simpleUpload
                  />,
                )}
              </Form.Item>
2+

发表评论

电子邮件地址不会被公开。