材质 UI 切换按钮组答案

【问题标题】：Material UI ToggleButtonGroup材质 UI 切换按钮组
【发布时间】：2020-06-25 04:58:51
【问题描述】：

我正在使用 Material UI 的 ToggleButtonGroup 功能，但是我无法弄清楚如何将值传递到我的 React 的状态中。下面是我的代码，我可以正确更改状态的日期，但是不能。我希望 ToggleButtonGroup 与 Select 在这里完全一样工作，因为它更好地匹配我的 UI。请帮我找出我在这里做错了什么。

state = {
    text: '',
    date: ''
}

handleChange = (event) => {
    this.setState({
        [event.target.name]: event.target.value
    })
}

handleSubmit = (event) => {
    event.preventDefault()

    // If input field empty, do nothing.
    if (this.state.text === '') {
        return
    }

    // Submit the form. (Add category here?)
    this.props.onSubmit({
        id: shortid.generate(),
        text: this.state.text,
        date: this.state.date,
        complete: false
    })

    // Empty out input field after todo has been submitted.
    this.setState({
        text: ''
    })
}
            <Select onChange={this.handleChange} name="date" id="date-select" variant="standard">
                <MenuItem value=""></MenuItem>
                <MenuItem value="today">Today</MenuItem>
                <MenuItem value="tomorrow">Tomorrow</MenuItem>
                <MenuItem value="week">This week</MenuItem>
            </Select>
            <ToggleButtonGroup onChange={this.handleChange} value="date" 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>

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

ToggleButtonGroup on onChange 回调有两个参数，第一个是事件，另一个是选择值，我们可以自定义它

handleChange = (name, newValue /*Value of the selected button*/) => {
    console.log(newValue); //value of the selected button
    this.setState({
        [name]: newValue
    })
}

所以如果handleChange 对Select 和ToggleButtonGroup 很常见，那么请像这样更改它。

<Select onChange={(e) => this.handleChange("date", e.target.value)} ...

<ToggleButtonGroup onChange={(e, value) => this.handleChange("date", value)}..

【讨论】：