Question

我试图抽象出一个基于ReactJS的简单应用程序的功能，但是控制台却抛出了一些我无法弄清楚的问题。

似乎围绕着我对this.setState(...)

的使用

我已将主要类中的原始函数注释掉，仅用于可见性。

按钮类（将移至新文件）

class Button extends React.Component {

  buttonAction(props) {
    switch (this.props.type) {
      case 'add':
        this.setState((prevState) => ({
          counter: prevState + this.props.label
        }));
        break;
      case 'take':
        this.setState((prevState) => ({
          counter: prevState - this.props.label
        }));
        break;
      case 'reset':
        this.setState(() => ({
          counter: 0
        }));
    }
  }

  render() {
    return (

      <button onClick={this.buttonAction(this.props.type)}>{this.props.label}</button>
    )
  }
}

App class

class App extends React.Component {
  // initial state of counter
  state = {
    counter: 0
  };

  // // function to increment the counter
  // incrementCounter = (increment) => {
  //   this.setState((prevState) => ({
  //     counter: prevState.counter + 1
  //   }));
  // };

  render() {
    return (
      <div>
        <Button type={'add'} label={1}/> 
        {this.state.counter}
      </div>
    )
  }
}

const root = document.getElementById('root');
ReactDOM.render(<App />, root);

Please see my code example here

Answer 1

您没有使用正确的POST上下文调用buttonAction。您需要将其绑定到组件。尝试将此添加到您的this组件：

Button

编辑：传递事件处理程序constructor(props) { super(props); this.buttonAction = this.buttonAction.bind(this); }的方法不正确。这应该是正确的方法：

buttonAction

Answer 2

我设法通过查看我已经拥有的旧代码来解决...

@Jules Dupont在他的第一个答案中处于正确的轨道，将功能转移到App类。

然而，我决定重构一些事情并最终得到以下结论：

// Class of button to click
class Button extends React.Component {

  // function to handle click
  handleClick = () => {
    this.props.onClickFunction(this.props.increment, this.props.type)
  };

  // what to render to virtual DOM
  render() {
    return (
      <button
        onClick={this.handleClick}>
        {this.props.state}{this.props.increment}
      </button>
    );
  }
}

// Result output
const Result = (props) => {
  return (
    <div>{props.counter}</div>
  );
};

// App class
class App extends React.Component {
  // initial state of counter
  state = {
    counter: 0
  };

  operators = {
    '+': function (a, b) { return a + b },
    '-': function (a, b) { return a - b },
    // ...
  }; 

  // function to increment the counter
  incrementCounter = (increment, type) => {
    console.log('hit')
    this.setState((prevState) => ({
      counter: this.operators[type](prevState.counter,increment)
    }));
  };

  // what to render to virtual DOM
  render() {
    return (
      <div>
        {/* Buttons of different incremental value */}
        <Button type={'+'} increment={1} onClickFunction={this.incrementCounter} />
        <Button type={'-'} increment={1} onClickFunction={this.incrementCounter} />

        {/* result that will be displayed */}
        <Result counter={this.state.counter} />
      </div>
    )
  }
}

摘要onClick动作

2 个答案: