如何在对话框关闭时重置 Material UI 复选框

Question

我通过 Material UI 创建了一个 Dialog 组件，从另一个文件动态导入。

它工作正常，除了这个对话框中的复选框（也是用 Material UI 创建的）在每次对话框关闭后都不会重置。他们只在页面刷新时重置。其他类型的 input，例如 text 或 password 会自动重置。

请注意 Dialog 组件没有 keepMounted = true，这就是它自动重置其输入的方式。因为，这个值是false by default.

这是原始对话框模态组件的代码：

import React, {useState, useEffect} from "react";
import Button from "@material/react-button";

import Divider from "@material-ui/core/Divider";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import TextField from "@material-ui/core/TextField";
import FormGroup from "@material-ui/core/FormGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";

const SearchModal = (props) => {

    const [checkState, setCheckState] = useState({
        checkedQuestions: true,
        checkedAnswers: true,
        checkedVerified: true,
        checkedPending: true,
        checkedDisputed: false
    });

    useEffect(() => {
        if(
            checkState.checkedQuestions === false &&
            checkState.checkedAnswers === false
        ){
            setCheckState({
                ...checkState,
                checkedQuestions: true,
                checkedAnswers: true
            });
        }
        if(
            checkState.checkedVerified === false &&
            checkState.checkedPending === false &&
            checkState.checkedDisputed === false
        ){
            setCheckState({
                ...checkState,
                checkedVerified: true,
                checkedPending: true,
                checkedDisputed: false
            });
        }
    });

    const checkSet = (event) => {
        setCheckState({
            ...checkState,
            [event.target.name]: event.target.checked
        });
    }

    return(
        <Dialog
            open={props.searchOpen}
            onClose={props.handleClose}
            aria-labelledby="searchModalTitle"
            aria-describedby="searchModalDescription"
            id="searchModal"
        >
            <DialogTitle id="dialog">{"Search tolodire."}</DialogTitle>
            <DialogContent>
                <DialogContentText className="marginBottom-17" id="searchModalDescription">
                    Search for questions or answers.
                </DialogContentText>
                <TextField
                    required
                    type="search"
                    id="searchQuery"
                    label="Enter keywords or sentences"
                    placeholder="Required"
                    variant="outlined"
                    data-owner="searchModal"
                    autoFocus
                />
                <DialogContentText className="marginTop-20 marginBottom-10">
                    Use filters to search in detail.
                </DialogContentText>
                <FormGroup row className="marginTop-5">
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedQuestions}
                                onChange={(e) => checkSet(e)}
                                name="checkedQuestions"
                            />
                        }
                        label="Questions"
                    />
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedAnswers}
                                onChange={(e) => checkSet(e)}
                                name="checkedAnswers"
                            />
                        }
                        label="Answers"
                    />
                </FormGroup>
                <Divider/>
                <FormGroup row>
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedVerified}
                                onChange={(e) => checkSet(e)}
                                name="checkedVerified"
                            />
                        }
                        label="Verified"
                    />
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedPending}
                                onChange={(e) => checkSet(e)}
                                name="checkedPending"
                            />
                        }
                        label="Pending Verification"
                    />
                    <FormControlLabel
                        control={
                            <Checkbox
                                color="default"
                                checked={checkState.checkedDisputed}
                                onChange={(e) => checkSet(e)}
                                name="checkedDisputed"
                            />
                        }
                        label="Disputed"
                    />
                </FormGroup>
            </DialogContent>
            <DialogActions>
                <Button raised className="button regularButton font-body" onClick={props.handleClose}>
                    Search
                </Button>
            </DialogActions>
        </Dialog>
    );
}

export default SearchModal

我已经尝试在 Google 和 Whosebug 上搜索这个问题，但是，我还没有找到任何解决方案。感谢任何贡献。

P.S: handleClose 常量在另一个文件上；

const [searchOpen, setSearchOpen] = useState(false);

const handleSearchOpen = () => {
    setSearchOpen(true);
};

const handleClose = () => {
    setSearchOpen(false);
};

Answer 1

我自己找到了解决方案。

在 SearchModal 的同一个文件中，我创建了另一个 useEffect 字段来检查模式是否打开。当我在预先存在的 useEffect 字段中尝试相同的操作时，它创建了无限循环。

对于重置过程，我将独立于其他 const 从头开始分配默认值。

我知道如果有更多的代码重用或动态元素，实现可能会好得多。但是，这只是一个原始的解决方案，直到更好的解决方案很快出现。

所以，解决方案是：

    useEffect(() => {
        if(props.searchOpen === false){
            setCheckState({
                checkedQuestions: true,
                checkedAnswers: false,
                checkedVerified: true,
                checkedPending: true,
                checkedDisputed: false
            });
        }
    }, [props.searchOpen]);

如何在对话框关闭时重置 Material UI 复选框

How to reset Material UI Checkbox on Dialog close

checkbox

modal-dialog

reactjs

material-ui