如何在反应js中设置按钮单击的值？答案

【问题标题】：how to set value on button click in react js?如何在反应js中设置按钮单击的值？
【发布时间】：2016-09-14 09:25:27
【问题描述】：

我想使用 react js 更改按钮单击的状态值。我能够获得点击事件。但是设置值没有更新为什么。我使用了这个

btnClick(){
    alert('---')
  //  this.setState({data: 'nannsd'});
     this.state ={data: 'sds'};
  }

这是我的代码 http://codepen.io/naveennsit/pen/MydPJM

class App extends React.Component{
  constructor(){
     super();
    this.state ={data: 'test'};
  }
  btnClick(){
    alert('---')
  //  this.setState({data: 'nannsd'});
     this.state ={data: 'sds'};
  }

  render(){
    return <div>
      hello {this.state.data}
      <button onClick={this.btnClick}>click</button>
    </div>
  }

}

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

【问题讨论】：

当你使用 ES6 类时，你必须在你的处理程序上绑定它。例如，在您的构造函数中添加 this.btnClick = this.btnClick.bind(this) stackoverflow.com/questions/36309636/…

标签： javascript reactjs react-native react-router

【解决方案1】：

两件事：

1) 在构造函数之外，你应该调用setState（而不是直接设置状态）。看起来你可能已经尝试过了，因为它已被注释掉。

2) 你需要绑定this，这样你在btnClick里面就有了正确的值。

这里是您的 codepen 的一个快速分支，已修复此问题。 http://codepen.io/juliepagano/pen/xVNyrO

class App extends React.Component{
  constructor(){
    super();
    this.state ={data: 'test'};
  }

  btnClick(){
    alert('---')
   this.setState({data: 'nannsd'});
     // this.state ={data: 'sds'};
  }

  render(){
    return <div>
      hello {this.state.data}
      <button onClick={this.btnClick.bind(this)}>click</button>
    </div>
  }

}

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

【讨论】：