如何仅设置单击的 IconButton 的颜色 - ReactJS？

Question

我是 React JS 的新手。我有多个 IconButtons。 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>
    );
  }
}

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

Answer 1

与其存储共享的属性（背景颜色），不如存储您真正需要的信息：即按下的按钮

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

如何仅设置单击的 IconButton 的颜色 - ReactJS？

How to set color of only the clicked IconButton - ReactJS?

reactjs

material-ui

react-component