今天遇到個場景：在form表單中的一個Input，在輸入的時候根據(jù)輸入值的不同，及時得到不同的value值
想到的第一個方法就是在onChange的時候使用setFieldsValue，如下：

...
 <Form.Item>
      {getFieldDecorator('name')(
         <Input 
             onChange={val=>{
                 setFieldsValue({name:val+'@example.com'})
             }}
         />
      )}
</Form.Item>
...

這樣你會發(fā)現(xiàn)一直報錯，之前沒有寫onChange的時候，修改Input值也沒有專門給其值set value，那么說明form監(jiān)測到change的時候默認(rèn)修改了值，那么先給個延遲試下：

...
<Input 
     onChange={val=>{
          setTimeout(()=>{
             setFieldsValue({name:val+'@example.com'})
          },0)  
     }}
/>
...

這樣就可以了，但是會render兩次，說明form確實在我手寫的onChange事件之后又執(zhí)行了內(nèi)部的setFieldsValue，故將我加的setFieldsValue覆蓋了，加了延遲之后，強制讓我手動加的執(zhí)行時間放在了內(nèi)部setFieldsValue事件之后了，這樣我手動加的事件就會覆蓋原內(nèi)部的事件，但其實現(xiàn)在問題并沒有得到解決，因為render兩次肯定是無法接受的，然后找文檔發(fā)現(xiàn)了一個api：

...
 <Form.Item>
      {getFieldDecorator('name', {
         getValueFromEvent: val => {
                // 進(jìn)行你想要的操作
                return val+'@example.com';
         }
      })(
         <Input />
      )}
</Form.Item>
...

這樣就完美解決啦！