Question

我是ReactJs.的新手。我尝试了一个带React的小片段。但是这个.state在ES6 ReactJs中不起作用。帮助我，我错过了什么!!

没有ES6的JS：

 var App = React.createClass({
      getInitialState: function() {
        return {value:''};
      },

      handleClick: function(e){
        this.setState({value:e.target.value});
        console.log(this.state.value);//getting value here
      },
      render: function() {
        return(
          <div>
            Hello {this.props.name}
            <input type="text" onChange={this.handleClick}/>
            {this.state.value}// no value
          </div>);
      }
    });
    React.render(<App name="Praveen" />, document.getElementById('content'));

这个案子工作正常。 Jsbin code

JS with ES6：

class App extends React.Component {
  constructor(props){
    super(props)
    this.state ={value:''};
  }
  handleClick(e){
    this.setState({value:e.target.value});
    console.log(this.state.value);//getting value here
  }
  render() {
    return(
      <div>
        Hello {this.props.name}
        <input type="text" onChange={this.handleClick}/>
        {this.state.value}// no value
      </div>);
  }
}
React.render(<App name="Praveen" />, document.getElementById('content'));

在这种情况下，每当我设置this.setState（）时，都不会调用render函数。 Jsbin code

Answer 1

ES6中的React删除了this的自动绑定，这意味着在扩展React.Component的类上声明的函数必须显式.bind(this)或使用箭头函数语法。

<input type="text" onChange={this.handleClick.bind(this)} />

或

class App extends React.Component {
   handleClick = (e) => {}
}

Answer 2

出于性能原因，建议在构造函数中执行bind，以便绑定仅在初始化时而不是在每个render上进行。

在React docs here上阅读有关事件处理程序的更多信息。

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value:''};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    this.setState({value:e.target.value}, () => {
      console.log(this.state.value); // Updated value here
    });
  }

  render() {
    return(
      <div>
        Hello {this.props.name}
        <input type="text" onChange={this.handleClick}/>
        {this.state.value}// no value
      </div>
    );
  }
}

为什么this.state不能在render（）中工作

2 个答案: