0

我正在尝试创建一个实现以下功能的react-hook-form组件：

  • 有两个复选框不能同时选中：一个“是”和一个“否”复选框。当用户单击“是”时，不应选中“否”复选框，分配给默认键的值应为“是”。当用户单击“否”时，会发生相反的情况。如何使用 react-hook-form 实现两个互斥的复选框？
  • 如果用户在前一个会话期间选中了一个框，则其中一个复选框将保持先前输入的值（例如，如果在第一个会话期间用户选中“否”，当页面重新加载时用户将看到“否”被选中） . 当用户返回表单时，如何确保选中正确的复选框？无论我到目前为止尝试了什么，当我返回表单时都会检查两个复选框 - 无论是否分配了默认值。
  • 只有一个值，一个字符串（不是数组）应该应用于指定的键。（例如，{...otherKeysValues, key_name: "yes"}）。截至目前，这些值作为{...otherKeyValues, key_name: ["yes"]}或{...otherKeyValues, key_name: ["yes", "no"]}取决于我的设置返回。

这是我正在使用的代码的粗略示例：

function ComponentName({ fetchedData }) {
  const { register, handleSubmit, reset, control, watch } = useForm({
    mode: 'onChange',
    defaultValues: fetchedData
  })

  const { fields, remove } = useFieldArray({
    control,
    name: "fetchedData"
  })



  useEffect(() => {
...fetch data
    reset(fetchedData)
  }, [reset, fetchedData])


const onSubmit = data => console.log(data)

const watchOption = watch('key_name')

return (
  <Form
    onChange={() => console.log("watch, getValues()", watchOption, getValues())}
    onSubmit={handleSubmit(onSubmit)}
  >
    <Col>
      <Form.Check
        className="checkbox-text pl-3"
        inline
        label="Yes"
        value={'yes'}
        ref={register}
        defaultChecked={'yes'}
        name={'key_name'}
        onClick={() => reset({ 'key_name': 'yes' })}

      />

      <Form.Check
        label="No"
        value={'no'}
        ref={register}
        defaultChecked={'no'}
        name={'key_name'}
        onClick={() => reset({ 'key_name': 'no' })}

      />
              </Form>
4

0 回答 0