无法调用this.setaddEventListener函数中的State

Question

我正在尝试通过DOM方法创建一个按钮，单击该按钮即可更改状态。我尝试将“this”作为变量传递给函数的参数

var self="this"
b.addEventListener("click", function(self){
    self.setState({health:100}) })

并尝试在函数末尾添加. bind（this），但没有成功。

b.addEventListener("click", function(){
    this.setState({health:100}) })

Answer 1

使用：

var self=this

b、 addEventListener（“单击”，函数（）{self.setState（{health:100}））

从中删除双引号，它应该可以工作。

Answer 2

您应该执行一个单独的函数来管理事件。然后将函数绑定到构造函数。例如

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }
render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }

此外，要考虑到这一点：

使用React时，通常不需要在DOM元素创建后调用addEventListener将侦听器添加到DOM元素中。相反，只需在元素最初呈现时提供一个侦听器。

在react中处理事件

Answer 3

这个问题可以使用右声明和自定义来处理。OR借助箭头函数（隐式词汇范围）

componentDidMount(){

  //assuing b defined

  //1.  if you want to use self
  const self = this; //  this should not be double quoted;
  b.addEventListener("click", function () {
    self.setState({ health: 100 });
  }

  // 2. using arrow function ( implicit lexical scope) 
  b.addEventListener("click", ()=> {
    this.setState({ health: 100 });
  }
}