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)
  ....代码省略
阅读 10k
1 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题