Question

我正在使用材质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>

Answer 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>

材质UI切换按钮状态

1 个答案: