显示输入文本值时的空白[重复]答案

【问题标题】：White space when displaying input text value [duplicate]显示输入文本值时的空白[重复]
【发布时间】：2017-08-01 15:38:53
【问题描述】：

我一直在尝试学习 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>

【问题讨论】：

这样写它会打印更新的状态值：this.setState({ firstName: event.target.value }, () => { console.log(this.state.firstName) } )
它正在工作！谢谢！ setState() 是异步的，因此可以解释它。

标签： reactjs input onchange

【解决方案1】：

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

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

【讨论】：