HTML 在React中取消选中单选按钮

在本文中，我们将介绍如何在React中取消选中单选按钮。

在开发Web应用程序时，我们经常需要使用表单来与用户进行交互。表单包含各种输入元素，如文本框、复选框和单选按钮。在某些情况下，我们希望能够取消选中一个已选中的单选按钮。在React中，我们可以使用状态来实现这个功能。

阅读更多：HTML 教程

使用状态取消选中

在React中，状态是管理组件数据的关键。通过在组件的构造函数中设置初始状态，我们可以追踪表单中的选项。为了取消选中单选按钮，我们可以将所有单选按钮的状态设置为false。

首先，我们需要为每个单选按钮添加一个状态。我们可以使用useState钩子函数来实现这个目标。以下是一个示例代码片段，演示了如何使用状态取消选中单选按钮：

import React, { useState } from "react";

function RadioButtons() {
  const [checked, setChecked] = useState({
    option1: false,
    option2: false,
    option3: false,
  });

  const handleOptionChange = (event) => {
    const { name } = event.target;
    setChecked((prevState) => ({
      ...prevState,
      [name]: !prevState[name],
    }));
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          name="option1"
          checked={checked.option1}
          onChange={handleOptionChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          name="option2"
          checked={checked.option2}
          onChange={handleOptionChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="radio"
          name="option3"
          checked={checked.option3}
          onChange={handleOptionChange}
        />
        Option 3
      </label>
    </div>
  );
}

export default RadioButtons;