时间戳

首页 > 解决方案 > 如何在对话框关闭时重置 Material UI 复选框

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

问题描述

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

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

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

以下是原始 Dialog 模态组件的代码：

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 和 StackOverflow 上搜索这个问题，但我还没有找到任何解决方案。任何贡献表示赞赏。

PS：handleClose 常量在另一个文件上；

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

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

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

标签： reactjscheckboxmaterial-uimodal-dialog

解决方案

我自己找到了解决方案。

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

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

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

所以，解决方案是：

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

推荐阅读