将react-bootstrap复选框设置为取消选中状态

Question

我是react的新手，我无法确定如何重置复选框以取消重置状态。我已经使用了react-bootstrap form，需要在单击按钮时将复选框重置为默认状态。

export const pitch: FC<pitchProps> = ({ pitchData, totalNoOfData }) => {
const [loading, setLoading] = useState(false);
const [totalRows, setTotalRows] = useState(totalNoOfData);
const formData = {
searchData: pitchParam.searchString,
searchCriteria: pitchParam.searchStatus,
};
const handleFormData = (e: any) => {
if (e.target.type === "checkbox") {
e.target.checked
? formData.searchCriteria.push(e.target.id)
: (formData.searchCriteria = formData.searchCriteria.filter(
(item: any) => item !== e.target.id
));
} else {
formData.searchData = e.target.value;
}
};
return (
<div className={styles.mainTableContainer}>
<div className="d-flex ml-2">
<Form className="w-100">
<Form.Row>
<Form.Label className={styles.label}>NEW </Form.Label>
<Form.Check
className={styles.checkbox}
type="checkbox"
id="OLD"
onChange={(e: any) => handleFormData(e)}
/>
<Form.Label className={styles.label}> OLD </Form.Label>
<Form.Check
className={styles.checkbox}
type="checkbox"
id="OUTDATED"
onChange={(e: any) => handleFormData(e)}
/>
<Form.Label className={styles.label}>OUTDATED </Form.Label>
<Form.Check
className={styles.checkbox}
type="checkbox"
id="SUCCESS"
onChange={(e: any) => handleFormData(e)}
/>
</Form.Row>
</Form>
</div>
</div>
);
};

Answer 1

你的checkbox组件不是完全由你控制的，所以它是一个非受控组件。

方案1:使用参考

由于您的checkbox由引导形式控制，您需要创建一个引用并将其传递给复选框以操纵checked值:

import React, {useRef} from 'react';
// reset of the codes
// in the pitch component
const checkboxRef = useRef(null);

现在，将checkboxRef传递到ref属性中的复选框组件中:

<Form.Check
type={type}
id={`default-${type}`}
label={`default ${type}`}   
ref={checkboxRef}     // <--------- here
/>

现在，尝试添加另一个带有reset处理程序的按钮:

const handleResetCheckbox = () => {
checkboxRef.current.checked = false
}

方案2:使用react key

你也可以通过使用React组件的键来做同样的事情。．如果键发生更改，react将删除该组件并创建一个新组件。所以你可以使用这个key属性来取消选中(重置)复选框:

用useState定义一个key，并将其传递给复选框组件:

const [key, setKey] = useState(false)
<Form.Check
key={key}            // <--------- added here
type={type}
id={`default-${type}`}
label={`default ${type}`}   
/>

现在，在handleResetCheckbox中，更改键:

const handleResetCheckbox = () => {
setKey(prevState => !prevState)
}

所以，当你重置复选框时，键会改变，然后React会删除旧的复选框并呈现一个新的。更多信息见React文档