今天遇到个场景:在form
表单中的一个Input
,在输入的时候根据输入值的不同,及时得到不同的value
值
想到的第一个方法就是在onChange
的时候使用setFieldsValue
,如下:
...
<Form.Item>
{getFieldDecorator('name')(
<Input
onChange={val=>{
setFieldsValue({name:val+'@example.com'})
}}
/>
)}
</Form.Item>
...
这样你会发现一直报错,之前没有写onChange
的时候,修改Input
值也没有专门给其值set value
,那么说明form
监测到change
的时候默认修改了值,那么先给个延迟试下:
...
<Input
onChange={val=>{
setTimeout(()=>{
setFieldsValue({name:val+'@example.com'})
},0)
}}
/>
...
这样就可以了,但是会render
两次,说明form
确实在我手写的onChange
事件之后又执行了内部的setFieldsValue
,故将我加的setFieldsValue
覆盖了,加了延迟之后,强制让我手动加的执行时间放在了内部setFieldsValue
事件之后了,这样我手动加的事件就会覆盖原内部的事件,但其实现在问题并没有得到解决,因为render
两次肯定是无法接受的,然后找文档发现了一个api
:
...
<Form.Item>
{getFieldDecorator('name', {
getValueFromEvent: val => {
// 进行你想要的操作
return val+'@example.com';
}
})(
<Input />
)}
</Form.Item>
...
这样就完美解决啦!