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

时间:2019-07-19 06:06:31

标签: reactjs material-ui react-component

我是React JS的新手。我有多个IconButtons。 OnClick我只希望单击的按钮可以更改其颜色。我使用过状态,但是当状态更改时,所有按钮的颜色都会更改。我应该采用哪种方法?有没有一种方法可以不使用状态来改变颜色?是否需要密钥或ID? 我提供的代码被裁剪了(意味着它仅包含我认为相关的部分)。

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>
    );
  }
}

我希望仅单击按钮即可更改颜色。但是显然它们都使用相同的状态,并且当状态改变时,所有按钮的颜色也会改变。

1 个答案:

答案 0 :(得分:2)

存储真正需要的信息,而不是存储共享属性(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>
    );
  }
}

edit:想法是存储一个与您的按钮之一相对应的ID(请注意,我假设一次只能单击一个按钮)。该ID处于组件状态。然后每个按钮将根据状态中的ID检查其ID;如果匹配,则将呈现不同的背景。 由于您可能希望在第二次单击后不按下按钮,因此onButtonClicked会在更新状态之前检查当前ID,如果该状态与新ID相同,则它将清除存储的I​​D