在 React 中设置单选按钮的默认选中值

Set the default checked value of a Radio button in React

在 React 中设置单选按钮的默认选中值：

将单选按钮值存储在状态中。
将状态初始化为默认选中的单选按钮的值。
有条件地设置checked每个单选按钮的属性。

应用程序.js


import React, {useState} from 'react';

export default function App() {
  // 👇️ initialize state to default checked radio button
  const [selected, setSelected] = useState('yes');

  const handleChange = event => {
    console.log(event.target.value);
    setSelected(event.target.value);
  };

  return (
    <div>
      <div>
        <input
          type="radio"
          id="yes"
          name="choose"
          value="yes"
          checked={selected === 'yes'}
          onChange={handleChange}
        />
        <label htmlFor="yes">Yes</label>

        <input
          type="radio"
          id="no"
          name="choose"
          value="no"
          onChange={handleChange}
          checked={selected === 'no'}
        />
        <label htmlFor="no">No</label>

        <input
          type="radio"
          id="maybe"
          name="choose"
          value="maybe"
          onChange={handleChange}
          checked={selected === 'maybe'}
        />
        <label htmlFor="maybe">Maybe</label>
      </div>
    </div>
  );
}

我们使用useState挂钩来跟踪所选单选按钮的值。

应用程序.js


const [selected, setSelected] = useState('yes');

每个input字段都有一个onChangeprop，所以每次值更改时，handleChange函数都会运行，我们用单击的单选按钮的值更新状态。

应用程序.js


const handleChange = event => {
  console.log(event.target.value);
  setSelected(event.target.value);
};

这是有效的，因为我们已经将状态变量初始化为我们默认要检查的单选按钮的值。

应用程序.js


const [selected, setSelected] = useState('yes');

我们将初始值传递yes给useState钩子，因此单选按钮的 checked 属性中的条件将true针对设置为的input字段
。valueyes

每个输入的propchecked有条件地检查selected状态变量是否等于输入的valueprop。

应用程序.js


<input
  type="radio"
  id="yes"
  name="choose"
  value="yes"
  checked={selected === 'yes'}
  onChange={handleChange}
/>
<label htmlFor="yes">Yes</label>

如果它们相等，则选中单选按钮。

这就是我们如何设置单选按钮的默认选中值：

我们将状态变量初始化为特定单选按钮的值。
我们在每个单选按钮上设置checkedprop 以有条件地检查状态变量是否等于它的值。

请注意，选中单选按钮会自动取消选中具有相同name属性的所有其他单选按钮。

如果您没有name为组中的所有单选input
字段分配相同的属性值，您将能够同时选中多个单选按钮。

如果这是您的用例需要的行为，您应该使用复选框而不是单选按钮。

我还写了一篇关于
如何设置复选框的默认选中值的文章。