Question

请考虑以下代码。我想保持文本字段中文本的最后一个字符存储在一个名为lastChar的状态中。为此，我做了以下代码？

define(["react","react-keydown"], (React,keydown) => {

  var TypingContainer = React.createClass({
    getInitialState: function() {
      return {text: '',lastChar:''};
    },
    handleChange: function(e) {


          console.log('lastChar typed is:'+ e.target.value.slice(-1));

          this.setState({lastChar: e.target.value.slice(-1)});

          console.log('lastChar in state is:'+ this.state.lastChar);


    }

      ,
    render: function() {
      return(
         <div>
           {this.props.candidateWord}
           {this.props.message}
            <input
              className="typing-container"
              value={this.state.message}
              onChange={this.handleChange}



            />

         </div>
      );
    }
  })
  return TypingContainer;
});

例如，如果用户输入hello，我希望看到e.target.value.slice(-1)和this.state.lastChar中的最后一个字符与o相同

同时lastChar显示l

换句话说，lastChar在精确值之前总是一个char？

为什么会这样？我该如何解决？

Answer 1

调用setState（）后，您将无法获得状态的更新值。这是因为只要调用setState()，就会重新呈现视图。因此最好检查渲染中的更新值。

 render: function() {
    console.log('lastChar in state is:'+ this.state.lastChar);
      return(
         <div>
           {this.props.candidateWord}
           {this.props.message}
            <input
              className="typing-container"
              value={this.state.message}
              onChange={this.handleChange}
            />

         </div>
      );
    }

或者，

this.setState({
    lastChar: e.target.value.slice(-1)}, ()=> { 
    console.log(this.state.lastChar)
});

反应：延迟更新状态

1 个答案: