Question

这可能很简单，但我绝对坚持下去。我的页面上有三个按钮，button1，button2，button3。

每个按钮必须独立行动。渲染时，有一个组件状态sum = 0。单击按钮时，onClick函数需要+1（添加1）到状态sum，或-1（减1）形成状态，如果按钮已经点击了。

实现这个目标的最佳方法是什么？

到目前为止，该组件如下：

export class Sum extends Component {
    constructor(props) {
        super(props)
        this.state = {
            sum: 0
        }
    }

    handleClick() {
        this.setState({ sum: this.state.sum + 1}) // needs to do -1 if the button is clicked already
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>button1</button>
                <button onClick={this.handleClick}>button2</button>
                <button onClick={this.handleClick}>button3</button>
            </div>
        )
    }

Answer 1

为每个按钮保留一个带有布尔值的数组。所以最初它就像这样

构造函数中的

this.state = {buttonClicked:[false,false,false]}

然后点击按钮点击。您将相应的按钮boolean更新为true。

然后如果布尔值为false，最后将1加到总和中。或者减去1。

Answer 2

jhipster docker-compose

Answer 3

只需检查现有状态并相应更改。

以下是工作代码https://codesandbox.io/s/14jq6kyyw7

import React from "react";
import { render } from "react-dom";

export class Sum extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sum: 0
    };
  }

  handleClick() {
    if (this.state.sum == 1) {
      this.setState({ sum: -1 }); 
    } else {
      this.setState({ sum: 1 }); 
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.sum}</h1>
        <button onClick={this.handleClick.bind(this)}>button1</button>
        <button onClick={this.handleClick.bind(this)}>button2</button>
        <button onClick={this.handleClick.bind(this)}>button3</button>
      </div>
    );
  }
}
render(<Sum />, document.getElementById("root"));

反应：按钮开关改变状态

3 个答案: