将 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 由 bootstrap 形式控制，您需要创建一个引用并将其传递给复选框以操纵 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
/>

现在，尝试添加另一个带有重置处理程序的按钮：

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

解决方案 2：使用反应键

您也可以通过使用 React 组件的 key 的不同方法来完成相同的操作。如果密钥发生变化，React 将删除该组件并创建一个新组件。所以您可以使用此键属性取消选中（重置）复选框：

用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 文档中的更多信息。

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

Set the react-bootstrap checkbox to uncheck state

javascript

checkbox

reactjs

react-bootstrap

解决方案 1：使用引用

解决方案 2：使用反应键