您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

您何时记录状态?请记住,这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

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

其他 2022/1/1 18:14:26 有660人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶