Question

我一直在努力学习React，我目前正在构建一个表单应用程序，我正在尝试在输入字段上输入后测试显示值。我似乎遇到了一个问题。我输入“Ab”时的示例控制台日志显示空白，然后是A，没有“b”。对此有解释吗？

这是我的代码

function Text(props) {
  var style = {
    paddingTop: 5,
    margin: 5
  };
  return (
    <div>
      <div style={style}> {props.label} </div>
      <input
        type="text"
        style={style}
        value={props.labelInputText}
        onChange={props.changeHandler}
      />
    </div>
  );
}
class FormApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: ""
    };
    this.changeHandler = this.changeHandler.bind(this);
  }
  changeHandler(event) {
    this.setState({ firstName: event.target.value });
    console.log(this.state.firstName);
  }

  render() {
    return (
      <div>
        <Text
          label="First Name"
          labelInputText={this.state.firstName}
          changeHandler={this.changeHandler}
        />
      </div>
    );
  }
}

ReactDOM.render(<FormApp/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

setState是异步的。您可以使用回调方法来获取更新状态。

changeHandler(event) {
    this.setState({ firstName: event.target.value }, () => 
    console.log(this.state.firstName));
 }

显示输入文本值时的空白区域

1 个答案: