ReactJS 单选按钮 OnChange - JavaScript

ReactJS 是一个基于组件化开发的 JavaScript 库，它可以使开发者更加容易构建复杂的 UI 界面。在 ReactJS 中，我们可以通过使用一个 input 元素来实现单选按钮的功能。

实现步骤

要实现一个单选按钮，我们需要遵循以下步骤：

1. 创建一个 input 元素，并设置 type 属性为 radio
2. 设置一个唯一的 name 属性，以便这个单选按钮可以成为一组中的一个选项
3. 设置一个 value 属性，表示这个选项的值
4. 在 onChange 事件中，处理选中状态的变化

下面是一个简单的 ReactJS 单选按钮的代码示例：

import React, { useState } from 'react';

function RadioButton() {
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <form>
      <div>
        <label>
          <input
            type="radio"
            name="option"
            value="option1"
            checked={selectedOption === "option1"}
            onChange={handleOptionChange}
          />
          Option 1
        </label>
      </div>
      <div>
        <label>
          <input
            type="radio"
            name="option"
            value="option2"
            checked={selectedOption === "option2"}
            onChange={handleOptionChange}
          />
          Option 2
        </label>
      </div>
    </form>
  );
}

export default RadioButton;

在上面的代码中，我们使用了 ReactJS 中的 useState hook 来管理单选按钮的选中状态。我们还定义了一个 handleOptionChange 函数来处理选中状态的变化。在渲染单选按钮的时候，我们使用了 checked 属性来判断哪个选项是被选中的。

总结

ReactJS 的单选按钮实现起来非常容易，只需要使用一个 input 元素并设置相应的属性即可。在事件处理函数中，我们可以使用 useState hook 来管理选项的选中状态，然后使用 checked 属性来判断哪个选项是被选中的。