1

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

1 回答 1

1

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

解决方案1：使用参考

由于您checkbox由 bootstrap-form 控制，因此您需要创建一个引用并将其传递给复选框以操作该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 将删除该组件并创建一个新组件。因此您可以使用此键属性取消选中（重置）复选框：

定义一个keywithuseState并将其传递给复选框组件：

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

于 2021-10-10T07:35:57.317 回答