Question

在react form页面上，我希望能够自动提交userInput（不带按钮）。所需的输入来自作为一个数字连接在一起的所有6个单独的输入字段。

为此，我尝试在最后一个输入字段不为空时调用onSubmit函数：

    change = e => {
    this.setState({[e.target.name]: e.target.value});

    if (e.target.value.length === e.target.maxLength && e.target.id <= 5){
        this.refs[parseInt(e.target.id, 6) + 1].focus();
    } else if (this.state.sixth.value !== ""){
        this.onSubmit();
        }
    };

但是，最后一个字段的输入将被忽略。例如，输入为abcdef，但结果为abcde。

Answer 1

一个常见的误解是setState是同步的..通常，它在看起来像那样的地方完成得足够快，但是事实并非如此。如果要确保考虑到刚刚设置的状态，则需要在setState的回调中完成操作。考虑一下：

change = e => {
  const target = e.target
  this.setState({[target.name]: target.value}, () => {
    if (target.value.length === target.maxLength && target.id <= 5){
        this.refs[parseInt(target.id, 6) + 1].focus();
    } else if (this.state.sixth.value !== ""){
        this.onSubmit();
    };
  });
}

经过编辑以反映有关e.target超出范围的评论。

https://reactjs.org/docs/react-component.html#setstate

setState（）的问题，未提交整个输入

1 个答案: