Question

在这里反应新手。

不确定为什么，但这些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;

Answer 1

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;

使用箭头功能创建词法绑定，这意味着它始终绑定到定义的位置，这样您就不需要在构造函数中将其绑定 - 更清晰的代码。

This article explains all the different ways of handling 'this'

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

Simple intro to object destructuring

最后使用.map和箭头功能，您可以实现一些非常干净的代码，如上所示。

Answer 2

尝试使用

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

而不是

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

Answer 3

你忘了绑定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>

反应onclick事件没有响应

3 个答案: