Javascript 为什么this.state在render（）中不起作用

我是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'));

var-App=React.createClass({
getInitialState:函数（）{
返回{值：''}；
},
handleClick:函数（e）{
this.setState（{value:e.target.value}）；
console.log（this.state.value）；//在这里获取值
},
render:function（）{
返回(
你好{this.props.name}
{this.state.value}//无值
);
}
});
反应(

JS与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'));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={value:''}；
}
handleClick（e）{
this.setState（{value:e.target.value}）；
console.log（this.state.value）；//在这里获取值
}
render（）{
返回(
你好{this.props.name}
{this.state.value}//无值
);
}
}
React.render（
React in ES6）删除了
this
的自动绑定，这意味着在扩展
React.Component的类上声明的函数必须显式地
.bind（this）
或使用箭头函数语法

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

出于性能原因，建议改为在构造函数中执行
bind
ing，以便绑定仅在初始化时发生，而不是在每次
渲染时发生

阅读有关React文档上事件处理程序的更多信息

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={value:''}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
this.setState（{value:e.target.value}，（）=>{
console.log（this.state.value）；//此处更新了值
});
}
render（）{
返回(
你好{this.props.name}
{this.state.value}//无值
);
}
}
+1使用第二种解决方案有点危险，因为它没有将函数附加到原型上。如果该组件被多次使用，内存消耗可能会成为一个问题。除此之外，答案很好。this.setState（{value:e.target.value}）；console.log（this.state.value）；//这里您不确定this.state.value是否会反映您的新值e.target.value。因为setValue是“异步”的，这一点很好。更新了代码以实现这一点。请注意，答案是很久以前写的（：
class App extends React.Component {
   handleClick = (e) => {}
}

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>
    );
  }
}