antd之Input的onChange坑

    首先說一下需求，三個input框的值輸入數字，想讓其自動加減，然后復制給第四個輸入框

 

很簡單的一個例子，原本想用onChange結合getFieldValue來使用呢    卻發現此onChange非彼onChange的

 

html代碼

<Row type={'flex'} style={{ width: '100%' }} align="middle">
          <Col span={17}>
            <FormItem label="一號"
              style={{ display: 'flex' }}
              {...formItemLayout}
              required={true}
            >
              {form.getFieldDecorator('one', config)(
                <Input placeholder="one" onChange={onChange} />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row type={'flex'} style={{ width: '100%' }} align="middle">
          <Col span={17}>
            <FormItem label="二號"
              style={{ display: 'flex' }}
              {...formItemLayout}
              required={true}
            >
              {form.getFieldDecorator('two', config)(
                <Input placeholder="two" onChange={onChange}/>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row type={'flex'} style={{ width: '100%' }} align="middle">
          <Col span={17}>
            <FormItem label="三號"
              style={{ display: 'flex' }}
              {...formItemLayout}
              required={true}
            >
              {form.getFieldDecorator('three', config)(
                <InputNumber placeholder="three" onChange={onChange} />
              )}
            </FormItem>
          </Col>
        </Row>
        <Row type={'flex'} style={{ width: '100%' }} align="middle">
          <Col span={17}>
            <FormItem label="總數"
              style={{ display: 'flex' }}
              {...formItemLayout}
              required={true}
            >
              {form.getFieldDecorator('sum', config)(
                <Input placeholder="sum" />
              )}
            </FormItem>
          </Col>
        </Row>

 

js

const onChange=(e)=>{
    const one=form.getFieldValue("one")
    const two = form.getFieldValue("two")
    const three = form.getFieldValue("three")
    console.log(one,two,three,"one two three");
  }


//此時你就會發現不能實時的更新  原因是當你動態的改變了值dom結構並沒有實時更新過來，所以只有你第二次觸發此函數的時候才會達到上一次的值

//那么你非要這樣獲取怎么辦呢    兩種思路可以獲取到

//一是   將你的打印簡單粗暴的放在一個定時器中就可以獲取去
//二是  將這個函數封裝成一個異步函數也可以獲取到


//由此可見這樣都比較不好   所以antd給你提供了e   目的就是想讓你當前輸入用e.target.value來獲取 而不是用getFieldValue獲取當前輸入值

//因此可見from的onSubmit就是一個異步方法可以將你輸入的所有值獲取到