Reactjs React onclick事件未响应

我是新手

不知道为什么，但这些onclick事件不是为我而发生的

我正在将这个类导入到一个主类中，所以我的主类可能无法读取其中的函数或其他什么

var React = require('react');
import { Button } from 'semantic-ui-react'

class TableDataRow 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() {


        const item = this.props.item;

        var columns = Object.keys(item).map(function(key) {
          return <td value={key}>{item[key]}</td>
        });

        return (
            <tr>
                {columns}
                <td>
                    <button className="ui button edit blue" value="{item.id}">
                        <i className="edit icon"></i>
                    </button>
                </td>
                <td>
                    <button onClick={this.handleClick} className="ui button delete red" value="{item.id}">
                        <i className="delete icon"></i>
                        {this.state.isToggleOn ? 'ON' : 'OFF'}
                    </button>
                </td>
            </tr>
        );
    }
}
module.exports = TableDataRow;

var React=require（'React'）；
从“语义ui反应”导入{Button}
类TableDataRow扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={istogleon:true}；
//此绑定是使`This`在回调中工作所必需的
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（prevState=>({
isToggleOn:！prevState.isToggleOn
}));
}
render（）{
const item=this.props.item；
var columns=Object.keys（item）.map（function（key）{
返回{item[key]}
});
返回(
{columns}
{this.state.isToggleOn？'ON'：'OFF'}
);
}
}
module.exports=TableDataRow；

尝试使用

this.setState(({prevState}) => ({
  isToggleOn: !prevState.isToggleOn
});

而不是

this.setState(prevState => ({
  isToggleOn: !prevState.isToggleOn
}));

---

您忘了将handleClick绑定到此：

<button onClick={this.handleClick.bind(this)} className="ui button delete red" value="{item.id}">
   <i className="delete icon"></i>
       {this.state.isToggleOn ? 'ON' : 'OFF'}
</button>

{this.state.isToggleOn？'ON'：'OFF'}
var React=require（'React'）；
从“语义ui反应”导入{Button}
类TableDataRow扩展了React.Component{
//对于初始状态，您不需要构造函数
状态={istogleon:true}；
//使用arrow函数并获取词法绑定
handleClick=（）=>{
this.setState（{istogleon:！this.state.istogleon}）
}
render（）{
//进行对象分解，所以从现在开始
//项目将参考此.props.item
const{item}=this.props；
const{istogleon}=this.state；
返回(
{Object.keys（item）.map（key=>{item[key]}）}
{isToggleOn？'ON'：'OFF'}
);
}
}
module.exports=TableDataRow；

使用arrow函数创建词法绑定，这意味着它总是绑定到定义它的位置，这样您就不需要在构造函数清理器代码中绑定它


当您执行
var item=this.props.item
时，您正在创建项的另一个副本。这可以通过分解来实现：
const{item}=This.props
。请注意，我也是如何分解
isToggleOn
的


最后，使用
.map
和arrow函数，您可以获得一些非常干净的代码，如上图所示。
在手动单击中，按如下方式操作
handleClick（）{this.setState（{do anythie}）}
确保将大括号放在prevState周围，以及是否尝试在handleClick（）中添加控制台日志方法并检查是否打印出来？对我来说很好。也许你可以提供更多关于这个组件如何在其他组件中使用的信息？
var React = require('react');
import { Button } from 'semantic-ui-react'

class TableDataRow extends React.Component {
  // you don't need constructor just for initial states
  state = {isToggleOn: true};

  // Use arrow function and get lexical binding
  handleClick = () => {
    this.setState({isToggleOn: !this.state.isToggleOn})
  }

  render() {
    // Do object destructuring, so from now on
    // item will be referred to this.props.item
    const {item} = this.props;
    const {isToggleOn} = this.state;

    return (
        <tr>
          { Object.keys(item).map(key => <td value={key}>{item[key]}</td>) }
          <td>
              <button className="ui button edit blue" value={item.id}>
                  <i className="edit icon"></i>
              </button>
          </td>
          <td>
            <button onClick={this.handleClick} className="ui button delete red" value={item.id}>
                <i className="delete icon"></i>
                {isToggleOn ? 'ON' : 'OFF'}
            </button>
          </td>
        </tr>
    );
  }
}
module.exports = TableDataRow;