React中的onChange不能捕获文本的最后一个字符

小编典典

React中的onChange不能捕获文本的最后一个字符

reactjs

这是我的渲染功能：

  render: function() {
    return  <div className="input-group search-box">
              <input
                onChange={this.handleTextChange}
                type="text"
                value={this.state.text}
                className="form-control search-item" />
              <span className="input-group-btn"></span>
        </div>
   }

我将其作为事件处理程序：

   handleTextChange: function(event) {
     console.log(event.target.value);
     this.setState({
       text: event.target.value
     });
   }

问题是当我“保存”一个项目或console.log打印输出时，缺少最后一个字符-例如，如果我输入“ first”，我将打印出“
firs”，并且需要是捕获最后一个字符的另一个关键事件。我试过了onKeyUp-不允许输入任何内容，我也试过了onKeyDown和onKeyPress，什么都不输出。这里发生了什么，为什么？怎样才能显示最后一个字符？

阅读 440

2020-07-22

共1个答案

小编典典

您何时记录状态？请记住，这setState是异步的，因此，如果要打印新状态，则必须使用callback参数。想象一下这个组件：

let Comp = React.createClass({
  getInitialState() {
    return { text: "abc" };
  },

  render() {
    return (
      <div>
        <input type="text" value={this.state.text}
               onChange={this.handleChange} />
        <button onClick={this.printValue}>Print Value</button>
      </div>
    );
  },

  handleChange(event) {
    console.log("Value from event:", event.target.value);

    this.setState({
      text: event.target.value
    }, () => {
      console.log("New state in ASYNC callback:", this.state.text);
    });

    console.log("New state DIRECTLY after setState:", this.state.text);
  },

  printValue() {
    console.log("Current value:", this.state.text);
  }
});

d在输入末尾键入a 将导致以下内容记录到控制台：

Value from event: abcd
New state DIRECTLY after setState: abc
New state in ASYNC callback: abcd

请注意，中间值缺少最后一个字符。这是一个有效的例子。

2020-07-22