Material UI ToggleButtonGroup

Question

我正在使用Material UI的ToggleButtonGroup特性，但是我不知道如何将值传递到React的状态中。下面是我的代码，我可以正确地更改状态的日期，但是不能。我希望ToggleButtonGroup能像这里的选择一样工作，因为它更符合我的用户界面。请帮我找出我在这里做错了什么。

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>

Answer 1

对于onChange回调的事件，需要两个参数，第一个是ToggleButtonGroup，另一个是选择值，我们可以对其进行自定义

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