如何仅设置单击的图标按钮的颜色-ReactJS？

我是新手。我有多个图标按钮。OnClick我只希望单击的按钮更改其颜色。我使用了状态，但当状态改变时，所有按钮的颜色都会改变。我应该采用什么方法？有没有一种不用状态就可以改变颜色的方法？是否需要钥匙或身份证？ 我提供的代码被裁剪意味着它只包含我认为相关的部分

class Utilitybar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bgColor: "default"
    };
  }
  render() {
    return (
      <div>
        <IconButton color={
          this.state.bgColor
        }
          onClick={
            () => {
              this.props.vidToggle();
              if (this.state.bgColor === "default") {
                this.setState({ bgColor: "primary" })
              } else {
                this.setState({ bgColor: "default" })
              }
            }
          }>
          <FaPlayCircle />
        </IconButton>
        <IconButton color={
          this.state.bgColor
        }
          onClick={
            () => {
              this.props.fileToggle();
              if (this.state.bgColor === "default") {
                this.setState({ bgColor: "primary" })
              } else {
                this.setState({ bgColor: "default" })
              }
            }
          }>
          <FaRegFileAlt />
        </IconButton>
      </div>
    );
  }
}

---

我希望只有点击按钮才能改变颜色。但很明显，它们都使用相同的状态，当状态更改时，所有按钮的颜色都会更改。

与其存储共享属性bg color，不如存储您真正需要的信息：即按下的按钮

class Utilitybar extends React.Component {
  constructor(props) {
    super(props)
    this.onButtonClicked = this.onButtonClicked.bind(this)
    this.state = { currentButton: null }
  }

  onButtonClicked (id) {
    this.setState({ currentButton: this.state.currentButton === id ? null : id })
  }

  render(){
    return (
      <div>
        <IconButton
          color={this.state.currentButton === 0 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(0)}>
          <FaPlayCircle/>
        </IconButton>
        <IconButton
          color={this.state.currentButton === 1 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(1)}>
          <FaRegFileAlt/>
        </IconButton>
      </div>
    );
  }
}

编辑：这个想法是存储一个与您的一个按钮对应的ID注意，我假设一次只能单击一个按钮。此ID被置于组件状态。然后每个按钮将根据状态中的ID检查其ID；如果匹配，则将渲染不同的背景。

---

由于您可能希望在第二次单击后取消按下按钮，因此onButtonClicked会在更新状态之前检查当前ID，如果与新ID相同，则会清除存储的ID，而不是存储共享属性bg颜色，存储您真正需要的信息：即按下的按钮

class Utilitybar extends React.Component {
  constructor(props) {
    super(props)
    this.onButtonClicked = this.onButtonClicked.bind(this)
    this.state = { currentButton: null }
  }

  onButtonClicked (id) {
    this.setState({ currentButton: this.state.currentButton === id ? null : id })
  }

  render(){
    return (
      <div>
        <IconButton
          color={this.state.currentButton === 0 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(0)}>
          <FaPlayCircle/>
        </IconButton>
        <IconButton
          color={this.state.currentButton === 1 ? "primary" : "default" }
          onClick={() => this.onButtonClicked(1)}>
          <FaRegFileAlt/>
        </IconButton>
      </div>
    );
  }
}

编辑：这个想法是存储一个与您的一个按钮对应的ID注意，我假设一次只能单击一个按钮。此ID被置于组件状态。然后每个按钮将根据状态中的ID检查其ID；如果匹配，则将渲染不同的背景。

---

由于您可能希望在第二次单击后取消按下按钮，因此onButtonClicked会在更新状态之前检查当前ID，如果它与新ID相同，则会清除存储的ID

能否解释onButtonClicked函数的工作原理？如果我希望一次单击多个按钮，该怎么办？与此类似，单击按钮不会清除以前单击的按钮的设置颜色。我需要在代码中做什么更改？谢谢。在状态中存储一个id数组而不是一个id。您可以解释onButtonClicked函数的工作原理吗？如果我希望一次单击多个按钮，该怎么办？与此类似，单击按钮不会清除以前单击的按钮的设置颜色。我需要在代码中做什么更改？谢谢。请在状态中存储一个id数组，而不是单个id