antd之Input的onChange坑

首先说一下需求，三个input框的值输入数字，想让其自动加减，然后复制给第四个输入框

很简单的一个例子，原本想用onChange结合getFieldValue来使用呢却发现此onChange非彼onChange的

html代码

 1 <Row type={'flex'} style={{ width: '100%' }} align="middle">
 2           <Col span={17}>
 3             <FormItem label="一号"
 4               style={{ display: 'flex' }}
 5               {...formItemLayout}
 6               required={true}
 7             >
 8               {form.getFieldDecorator('one', config)(
 9                 <Input placeholder="one" onChange={onChange} />
10               )}
11             </FormItem>
12           </Col>
13         </Row>
14         <Row type={'flex'} style={{ width: '100%' }} align="middle">
15           <Col span={17}>
16             <FormItem label="二号"
17               style={{ display: 'flex' }}
18               {...formItemLayout}
19               required={true}
20             >
21               {form.getFieldDecorator('two', config)(
22                 <Input placeholder="two" onChange={onChange}/>
23               )}
24             </FormItem>
25           </Col>
26         </Row>
27         <Row type={'flex'} style={{ width: '100%' }} align="middle">
28           <Col span={17}>
29             <FormItem label="三号"
30               style={{ display: 'flex' }}
31               {...formItemLayout}
32               required={true}
33             >
34               {form.getFieldDecorator('three', config)(
35                 <InputNumber placeholder="three" onChange={onChange} />
36               )}
37             </FormItem>
38           </Col>
39         </Row>
40         <Row type={'flex'} style={{ width: '100%' }} align="middle">
41           <Col span={17}>
42             <FormItem label="总数"
43               style={{ display: 'flex' }}
44               {...formItemLayout}
45               required={true}
46             >
47               {form.getFieldDecorator('sum', config)(
48                 <Input placeholder="sum" />
49               )}
50             </FormItem>
51           </Col>
52         </Row>

View Code

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就是一个异步方法可以将你输入的所有值获取到

antd之Input的onChange坑

猜你喜欢