如何实现单选按钮再次点击取消选中，轻松实现用户友好的表单？

2024-03-15 05:27:31

如何实现再次点击单选按钮时取消选中

背景

单选按钮在表单中很常见，用于从一系列选项中进行选择。然而，有时候我们希望再次点击同一按钮时能取消选中。本文将详细介绍如何使用 react-hook-form 来实现此功能。

解决方案步骤

1. 安装依赖项

npm install react-hook-form

2. 使用 `react-hook-form`

使用 useForm 钩子管理表单状态。
使用 Controller 组件渲染表单元素并与表单状态进行交互。
使用 useEffect 钩子在特定状态改变时执行操作。

3. 处理单选按钮点击

使用 onClick 处理程序监听单选按钮点击，并执行以下操作：

如果选项已被选中，则将其重置为空值。
如果选项未被选中，则将其设置为新值。

代码示例

import { Controller, useForm, setValue } from "react-hook-form";

export default function App() {
  const { control, setValue } = useForm();
  const [value, setValue] = useState(null);

  useEffect(() => {
    setValue("TEST", "");
  }, [value]);

  const handler = () => {
    if (value !== null) {
      setValue("TEST", "");
    }
  };

  return (
    <div className="App">
      <Controller
        control={control}
        name="TEST"
        render={({ field }) => (
          <>
            <input type="radio" {...field} value={1} onClick={handler} />
            <label htmlFor={field.name}>Option 1</label>

            <input type="radio" {...field} value={2} onClick={handler} />
            <label htmlFor={field.name}>Option 2</label>
          </>
        )}
      />
    </div>
  );
}