antd的form表单中,Input标签的onChange方法中使用getFieldsValue无法实时获得表单数据

            <FormItem>
              {form.getFieldDecorator('ScoreSingle', {
                rules: [{ required: true, message: '请设置单选题分值!' }],
              })(<InputNumber min={0} placeholder="题目分值" style={{ width: '60%' }} onChange={() => {this.handleInputBlur()}} />)}
            </FormItem>

使用onChange函数可以通过event参数获取到实时输入的值,但是无法通过form.getFieldsValue包裹的表单的实时数据,form.getFieldsValue获取到的是之前的值不是最新的,想要获取到最新的怎么办?

  /**
 * 每当输入框有变化的时候计算总分数和总题数
 * */
handleInputBlur = () => {
  console.log("进入onChange函数");
  const { form } = this.props
  let values = {}
  values = form.getFieldsValue()
  console.log(values);
  delUndefined(values)
  ....代码省略
阅读 2.4k
评论
    1 个回答

    clipboard.png
    目前用简单粗暴的方式解决了,把form.getFieldsValue放到onChange对应的函数中的setTimeOut中异步执行,但只能一时救急,还是解决不了根本问题,期待大家回答

    image.png
    又找到了另一种简单粗暴的方法,在onChange绑定事件的时候,把被绑定事件放在setTimeOut里面,也可以让form.getFieldsValue获取到的值是最新值

    image.png
    image.png
    稍微优雅一点的,把onChange绑定一个异步函数,然后把form.getFieldsValue的处理过程放到这个异步函数的回调中执行

      撰写回答

      登录后参与交流、获取后续更新提醒