如何在输入列表(单选按钮？)上注册单击事件

<input type="radio" id="option1" name="options">
<label for="option1">Option 1</label>

<input type="radio" id="option2" name="options">
<label for="option2">Option 2</label>

<input type="radio" id="option3" name="options">
<label for="option3">Option 3</label>

document.getElementById("option1").addEventListener("click", function() {
  // 处理选中Option 1的逻辑
});

document.getElementById("option2").addEventListener("click", function() {
  // 处理选中Option 2的逻辑
});

document.getElementById("option3").addEventListener("click", function() {
  // 处理选中Option 3的逻辑
});

import React, { useState } from "react";

function RadioButtonList() {
  const [selectedOption, setSelectedOption] = useState("");

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
    // 处理选中选项的逻辑
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === "option1"}
          onChange={handleOptionChange}
        />
        Option 1
      </label>

      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === "option2"}
          onChange={handleOptionChange}
        />
        Option 2
      </label>

      <label>
        <input
          type="radio"
          value="option3"
          checked={selectedOption === "option3"}
          onChange={handleOptionChange}
        />
        Option 3
      </label>
    </div>
  );
}

export default RadioButtonList;