ToggleButton - 如何取消切换？答案

【问题标题】：ToggleButton - how to untoggle?ToggleButton - 如何取消切换？
【发布时间】：2020-06-27 01:11:49
【问题描述】：

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

包含切换的类：

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

包含待办事项的类：

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

【问题讨论】：

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

标签： javascript reactjs material-ui

【解决方案1】：

如果未选择任何内容，我看到切换按钮组返回 null。因此，您可以检查 null 并设置为 no date 。这是切换按钮示例。 https://codesandbox.io/s/j2wp0?file=/demo.js

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

【讨论】：

【解决方案2】：

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

【讨论】：