antd design中使用getValueFromEvent转换onChang回传的数据
开发了一个图片上传组件,需要在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>
版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/2353/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。
共有 0 条评论