美文网首页
antd设置当前form表单中正在change的值,setFie

antd设置当前form表单中正在change的值,setFie

作者: 小m_up | 来源:发表于2019-03-20 23:22 被阅读0次

今天遇到个场景:在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>
...

这样就完美解决啦!


相关文章

网友评论

      本文标题:antd设置当前form表单中正在change的值,setFie

      本文链接:https://www.haomeiwen.com/subject/julxvqtx.html