反应updateState函数

Question

我有简单的更新数据功能，目前无效：

    class App extends React.Component {

           constructor(props) {
              super(props);

              this.state = {
                 data: 'Initial data...'
              }

              this.updateState = this.updateState.bind(this);

           };

           updateState() {
              this.setState({data: 'Data updated...'})
           }

           render() {
              return (
                 <div>
                    <button onClick = {this.updateState}>CLICK</button>
                    <h4>{this.data}</h4>
                 </div>
              );
           }
        }

   ReactDOM.render(<App/>, document.getElementById('app'));

下面我链接到jsbin：

http://jsbin.com/vidumiroki/edit?html,js,output

Answer 1

您在返回渲染功能中错过了状态

class App extends React.Component {

   constructor(props) {
      super(props);

      this.state = {
         data: 'Initial data...'
      }

      this.updateState = this.updateState.bind(this);

   };

   updateState() {
      this.setState({data: 'Data updated...'})
   }

   render() {
      return (
         <div>
            <button onClick = {this.updateState}>CLICK</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}

ReactDOM.render(<App/>, document.getElementById('app'));