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

Z时代
2024-01-10
分类：问答

这是我的渲染功能：

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，什么都不输出。这里发生了什么，为什么？怎样才能显示最后一个字符？

回答：

您何时记录状态？请记住，这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);
  }
});