Javascript 切换按钮-如何保持不变？

我目前正在使用待办事项列表中的ToggleButtonGroup将我的输入分类为今天/明天/本周/无日期。如果未切换任何按钮，待办事项将归入“无日期”项下，否则将归入其他3个类别之一。 我的问题是，当我启动应用程序并在不切换任何内容的情况下输入todo时，todo将正确地排序在“无日期”下。但是，一旦我切换/取消切换任何[今天/明天/本周]选项，我就无法再在“无日期”下对任何内容进行排序。我怎样才能解决这个问题

类，该类包含切换：

    import React from 'react'
    import shortid from 'shortid'
    import { Button, ButtonGroup, MenuItem, Select, TextField, InputBase } from '@material- 
    ui/core'
    import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab'
    
    export default class TodoForm extends React.Component {
    state = {
        text: '',
        date: ''
    }

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

    handleToggleChange = (e, value) => {
        if (this.state.date == value) {
            this.setState({
                date: ''
            })
        } else {
            this.setState({
                date: value
            })
        }
    }

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

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

        // Submit the form.
        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: ''
        })
    }

    render() {
        return (
            <form className="td-form" onSubmit={this.handleSubmit}>
                <div className="td-form-input"><InputBase 
                    fullWidth={true}
                    name="text" 
                    value={this.state.text} 
                    onChange={this.handleChange} 
                    placeholder="What do you need to get done?"
                    variant="outlined"
                />
                </div>
                
                <div className="td-form-buttons">
                <ToggleButtonGroup value={this.state.date} onChange={this.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>
                <Button className="mui-add" onClick={this.handleSubmit} variant="contained"
                    style={{
                        maxWidth: '36px', 
                        maxHeight: '36px', 
                        minWidth: '36px', 
                        minHeight: '36px', 
                        borderRadius: '36px', 
                        margin: '16px'}}
                >+</Button>
                </div>
            </form>
        )
    }
}

从“React”导入React
从“shortid”导入shortid
从'@material-
用户界面/核心'
从“@material ui/lab”导入{ToggleButton，ToggleButtonGroup}
将默认类导出到表单扩展React.Component{
状态={
文本：“”，
日期：''
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
})
}
handleToggleChange=（e，值）=>{
if（this.state.date==值）{
这是我的国家({
日期：''
})
}否则{
这是我的国家({
日期：价值
})
}
}
handleSubmit=（事件）=>{
event.preventDefault（）
//如果输入字段为空，则不执行任何操作。
如果（this.state.text===''）{
返回
}
//提交表格。
这个.props.onSubmit({
id:shortid.generate（），
text:this.state.text，
日期：this.state.date，
完整：错误
})
//提交todo后清空输入字段。
这是我的国家({
文本：“”
})
}
render（）{
返回(
今天
明天
本周
+
)
}
}

包含TODO的类：

   import React from 'react'
import { Button, IconButton } from '@material-ui/core'
import RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';

export default props => (
    <div className={props.todo.complete ? "" : "td-itemBackground"}>
        <div className={props.todo.complete ? "td-itemCompleted" : "td-item"}>
            <Button onClick={props.toggleComplete} 
                style={{
                    maxWidth: '36px', 
                    maxHeight: '36px', 
                    minWidth: '36px', 
                    minHeight: '36px', 
                    borderRadius: '36px', 
                    margin: '16px'}}
            >
                <RemoveCircleOutlineIcon/>
            </Button>
            <div 
                style={{
                    textDecoration: props.todo.complete ? "line-through" : ""
                }} 
                onClick={props.toggleComplete}
            >
                <div className="td-text">{props.todo.text}</div>
            </div>
        </div>
    </div>
)

从“React”导入React
从“@material ui/core”导入{Button，IconButton}
从“@material ui/icons/RemoveCircleOutline”导入RemoveCircleOutlineIcon；
导出默认道具=>(
{props.todo.text}
)

将handleToggleChange代码更改为以下，以便在按钮未切换时，日期将正确设置为空。不确定是否最好的方法可以接受其他建议

  handleToggleChange = (e, value) => {
        if (this.state.date == 'today' || this.state.date == 'tomorrow' || this.state.date == 'week') {
            this.setState({
                date: ''
            })
        } else {
            this.setState({
                date: value
            })
        }
    }

---

如果没有选择任何内容，我看到切换按钮组返回null。因此，您可以检查null并设置为no date。下面是切换按钮示例。

handleToggleChange=（e，值）=>{
如果（值===null）{
这是我的国家({
日期：''
})
}否则{
这是我的国家({
日期：价值
})
}
}

能否包含呈现待办事项的组件？@drewrese，并且可以关闭。有一个不能切换的切换按钮是没有意义的。您描述的是RadioButton和RadioButtonGroup。另外，我认为OP不希望有一个“无日期”切换。没有按钮切换意味着“没有日期”。@drewrese好吧，如果你能查找源代码，你也许应该在表达错误的猜测之前这样做？或者，由于此处使用的库已标记，因此也很容易查看文档。我不认为有任何理由错误地将OP指向一个不存在的问题，并且可以很容易地排除它。@trix这是正确的。我不希望有一个“无日期”按钮-我希望在没有选择其他3个切换时，可以选择该按钮。该切换可以正确切换为“关闭”，但问题是它不会将状态更改回“无日期”“无日期”仅在我切换任何内容之前有效。