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

Question

这是我的渲染函数:

  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，它们什么都不输出.这里发生了什么，为什么？我怎样才能让最后一个 Angular 色出现？

Answer 1

你什么时候记录状态？记住 setState 是异步的，所以如果你想打印 new 状态，你必须使用回调参数。想象一下这个组件:

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 将导致以下内容被记录到控制台:

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

请注意，中间值缺少最后一个字符。 Here's a working example .