材质 UI 切换按钮状态答案

【问题标题】：Material UI Toggle Button state材质 UI 切换按钮状态
【发布时间】：2020-06-25 23:53:30
【问题描述】：

我正在使用 Material UI 的 ToggleButton/ToggleButtonGroup，但无法弄清楚如何在单击时突出显示 ToggleButton，并在单击组中的另一个按钮时取消突出显示。该按钮当前用于注册输入，但不显示选择。我希望用户只能选择三个选项之一。

handleToggleChange = (date, newValue) => {
    this.setState({
        [date]: newValue
    })
}

<ToggleButtonGroup onChange={(e, value) => this.handleToggleChange("date", value)} name="date" 
id="date-select" exclusive={true} size="small">
                <ToggleButton value="today">Today</ToggleButton>
                <ToggleButton value="tomorrow">Tomorrow</ToggleButton>
                <ToggleButton value="week">This week</ToggleButton>
</ToggleButtonGroup>

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

你错过了最重要的道具：价值

<ToggleButtonGroup
  value={alignment}
  exclusive
  onChange={handleAlignment}
  aria-label="text alignment"
>

看起来你正在正确地更新你的状态，让你不要让组件知道当前选择了什么。您只需要保存当前选择的值即可。

handleToggleChange = (e, value) => {
    this.setState({
        date: value
    })
}

<ToggleButtonGroup
      value={this.state.date}
      onChange={handleToggleChange }
      name="date" 
      id="date-select"
      exclusive={true}
       size="small">
                <ToggleButton value="today">Today</ToggleButton>
                <ToggleButton value="tomorrow">Tomorrow</ToggleButton>
                <ToggleButton value="week">This week</ToggleButton>
</ToggleButtonGroup>

【讨论】：