Javascript 如何正确绑定React组件类'；当从createClass转换为class关键字时，是否设置事件处理程序？

我正在准备我们的React组件升级到React 16，该过程的关键是更新使用

React.createClass

的组件，改为使用

class

关键字

当涉及到调用类方法的事件处理程序时，我遇到了麻烦，因为我一直看到

只能更新装入的或装入的组件
错误

一个微不足道的例子

使用React.createClass的原始组件

const Foo = React.createClass({
  getInitialState() {
    return { bar: false };
  },

  onClick() {
    this.setState({ bar: !this.state.bar });
  },

  render() {
    return (
      <div>
        <p>{this.state.bar ? 'YAY' : 'BOO'}</p>
        <button onClick={this.onClick}>CLICK IT</button>
      </div>
    );
  },
});

但是，我无法使用“在构造函数中绑定”的方法：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: false };

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({ bar: !this.state.bar });
  }

  render() {
    return (
      <div>
        <p>{this.state.bar ? 'YAY' : 'BOO'}</p>
        <button onClick={this.onClick}>CLICK IT</button>
      </div>
    );
  }
}

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: false };
  }

  onClick = () => {
    this.setState({ bar: !this.state.bar });
  }

  render() {
    return (
      <div>
        <p>{this.state.bar ? 'YAY' : 'BOO'}</p>
        <button onClick={this.onClick}>CLICK IT</button>
      </div>
    );
  }
}

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={bar:false}；
this.onClick=this.onClick.bind（this）；
}
onClick（）{
this.setState（{bar:！this.state.bar}）；
}
render（）{
返回(
{this.state.bar？'YAY'：'BOO'}

点击它
);
}
}

我也无法使属性初始值设定项语法方法起作用：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: false };

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({ bar: !this.state.bar });
  }

  render() {
    return (
      <div>
        <p>{this.state.bar ? 'YAY' : 'BOO'}</p>
        <button onClick={this.onClick}>CLICK IT</button>
      </div>
    );
  }
}

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: false };
  }

  onClick = () => {
    this.setState({ bar: !this.state.bar });
  }

  render() {
    return (
      <div>
        <p>{this.state.bar ? 'YAY' : 'BOO'}</p>
        <button onClick={this.onClick}>CLICK IT</button>
      </div>
    );
  }
}

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={bar:false}；
}
onClick=（）=>{
this.setState（{bar:！this.state.bar}）；
}
render（）{
返回(
{this.state.bar？'YAY'：'BOO'}

点击它
);
}
}

在这两种情况下，无论何时单击按钮，上述错误消息都会显示在浏览器控制台中

我希望有人自己已经遇到了这个问题，并就如何处理它提出了建议。我想这只是我完全忽略的一件小事

提前谢谢
 看看React文档：它们有相同的示例。顺便说一句，你的绑定示例对我很有用：发布你的错误消息

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

  ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
  );

类切换扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={istogleon:true}；
//此绑定是使`This`在回调中工作所必需的
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（prevState=>({
isToggleOn:！prevState.isToggleOn
}));
}
render（）{
返回(
{this.state.isToggleOn？'ON'：'OFF'}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
Pshh，用简单的方法和使用。在构造函数中自动将所有组件函数绑定到此

超级简单易用：

import autoBind from 'react-autobind';

constructor() {
  super();
  autoBind(this);
}

在将一些代码从一个电子应用程序移植到web上之后，出现了这个问题

“transform-es2015-classes”
正是您所需要的

npm安装——保存dev babel-plugin-transform-es2015-classes

更多信息@the
你能试试
onClick（）{this.setState（（prevState）=>（{bar:！prevState.bar}））；}
那是另一个问题；这两种绑定方法都可以正常工作。要使类属性正常工作，需要对它们进行转换。它们现在还没有包括在巴别塔预设中，因为它们仍然是一个提案。您需要启用。
只能更新已安装或正在安装的组件
错误意味着正在对组件实例正确调用
设置状态
，但该实例尚未安装或已卸载。您是否正在运行您在此处发布的确切代码？@RossAllen我已启用了
stage-2
。错误消息非常标准：“警告：setState（…）：只能更新已安装或正在安装的组件。这通常意味着您对未安装的组件调用了setState（）。这是禁止操作的。请检查Foo组件的代码。”我在一个barebones
CreateReact应用程序中进行了测试，并验证了它在那里工作，因此这只是应用程序设置的问题。谢谢听起来像是作弊说真的，我认为那是行不通的。应用程序中有一个问题，我正试图指出。语法是正确的，因为我可以让类在一个基本的
createreact-app
app中工作，所以还有其他一些事情正在影响react组件的绑定方式。