单击时在ReactJS MaterialUI FloatingButton上切换属性

Question

我需要使用浮动按钮模拟复选框行为。按钮最初加载时secondary属性设置为true。像这样：

<FloatingActionButton secondary={true} mini>
    T
</FloatingActionButton>

如果单击，则将辅助属性值切换为false，如下所示：

<FloatingActionButton secondary={false} mini>
    T
</FloatingActionButton>

这是M被激活的最终结果

这是我试图做的，但当然，它不起作用，哈哈

class PlayerNetwork extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            activeDayId: "true",
        };
        this.setActiveDay = this.setActiveDay.bind(this);
    }

    setActiveDay(id) {
        this.setState({activeDayId: id});
    }


    render() {
        return (
            <div>
                <Row>
                    <Col>
                        <FloatingActionButton
                            secondary={this.state.activeDayId === 1 ? "true" : "false"} 
                            mini
                            onClick={() => this.setActiveDay(1)}>
                            S
                        </FloatingActionButton>
                    </Col>
               <Row>
            </div>
        );
    }
}

如果你有一个比我更简单，最简单的方法，我也都会为它做好准备。提前致谢

Answer 1

如果要切换按钮，则只需在方法中添加一个条件，检查是否已设置id，然后重置它

setActiveDay(id) {
        if (id === this.state.activeDayId) {
          // id is already selected and user has clicked on it again so reset it by assigning "null" to it
          this.setState({activeDayId: null});
        }
        else {
           this.setState({activeDayId: id});
        }
    }

你也可以将boolean传递给secondary prop而不使用这样的三元运算符

<FloatingActionButton
    secondary={this.state.activeDayId === 1} 
    mini
    onClick={() => this.setActiveDay(1)}>
         S
</FloatingActionButton>

更新：

如果你想跟踪多天，那么你必须采取一个阵列。在constructor中初始化数组，跟踪活动天数

constructor(){
  this.state = {
     // initially blank, so no days are active
     activeDayIds: [],
  }
}

然后将setActiveDay改为此

setActiveDay(id) {
        let activeDayIds = [...this.state.activeDayIds];
        if (this.state.activeDayIds.includes(id)) {
          // id is already in the array which means it is selected and user has clicked on it again so remove it from array
          activeDayIds.splice(activeDayIds.indexOf(id), 1);
        }
        else {
           // this id is not in the array yet which means user has activated this so include this in array
           activeDayIds.push(id)
        }
       // set back the state
       this.setState({activeDayIds: activeDayIds});
    }

然后使用以下条件呈现元素

<FloatingActionButton
        secondary={this.state.activeDayIds.includes(1)} 
        mini
        onClick={() => this.setActiveDay(1)}>
             S
    </FloatingActionButton>

Answer 2

如果true和false值用引号括起来，它们将始终是true值。

所以当你在{this.state.activeDayId === 1 ? "true" : "false"}道具中有secondary时，它将永远是true

试试它没有引号，如：

<FloatingActionButton
  secondary={this.state.activeDayId === 1 ? true : false} 
  mini
  onClick={() => this.setActiveDay(1)}>
    S
</FloatingActionButton>

或者更简单：

<FloatingActionButton
  secondary={this.state.activeDayId === 1} 
  mini
  onClick={() => this.setActiveDay(1)}>
    S
</FloatingActionButton>