I've created a Dialog component via Material UI, dynamically imported from another file.
It works fine, except the checkboxes (also created with Material UI) inside this Dialog do not reset after each time Dialog closes. They only reset on page refresh. Other types of input
, such as text
or password
do reset themselves automatically.
Here is the code for the original Dialog modal component:
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
I've already tried searching this issue on Google and StackOverflow, yet, I haven't found any solution. Any contribution is appreciated.
P.S: The handleClose const is on another file;
const [searchOpen, setSearchOpen] = useState(false);
const handleSearchOpen = () => {
setSearchOpen(true);
};
const handleClose = () => {
setSearchOpen(false);
};
Aucun commentaire:
Enregistrer un commentaire