迹忆客 专注技术分享

在 React 中通过单击文本来选择单选按钮：

1. 为每个单选按钮添加一个标签元素。
2. 每个标签的 htmlFor 属性应设置为每个单选按钮的 ID。
3. 单击标签元素以选择单选按钮。

import React, {useState} from 'react';

export default function App() {
  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>
  );
}

每个单选按钮都有一个对应的标签元素。

将每个标签元素的 htmlFor 属性设置为单选按钮的 id 属性很重要。

我们必须在 React 中使用 htmlFor（而不是 for）的原因是因为 for 关键字是一个保留字 - 它用于 for 循环。

我们还可以将单选按钮包裹在相应的标签中。

import React, {useState} from 'react';

export default function App() {
  const [selected, setSelected] = useState('yes');

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

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

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

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

代码片段实现了相同的结果，但我们将每个单选按钮包装在其标签中。

从技术上讲，当我们将每个单选按钮包装在标签中时，我们没有必要在标签元素上设置 htmlFor 属性。

下面的示例从每个标签元素中删除 htmlFor 属性，并且单击单选按钮的文本仍会选中它。

import React, {useState} from 'react';

export default function App() {
  const [selected, setSelected] = useState('yes');

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

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

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

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

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

如果我们没有为组中的所有单选输入字段分配相同的名称属性值，我们将能够同时选中多个单选按钮。

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