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

【问题标题】：Set the react-bootstrap checkbox to uncheck state将 react-bootstrap 复选框设置为取消选中状态
【发布时间】：2022-03-24 23:42:47
【问题描述】：

我是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>
);
};

【问题讨论】：

是否需要取消选中“searchData”功能中的复选框？
不在 searchData 我在另一个组件中有按钮，它设置 redux 状态以重置然后需要重置此复选框以取消选中状态
我已经设置了状态，但还没有在这个组件中处理，因为我无法弄清楚..，如果在 searchData 函数本身上发生 uncheck 也可以
如果我遇到问题，是否需要使用处理程序实现另一个按钮以取消选中复选框？
是的@novonimo tats wat 我需要...

标签： javascript reactjs checkbox react-bootstrap

【解决方案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
/>

现在，尝试使用重置处理程序添加另一个按钮：

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

【讨论】：