modal中显示单选框 input 列表 react

在 React 中，你可以使用 `<input type="radio">` 元素来创建单选框列表。你可以使用组件的状态来跟踪选中的选项。下面是一个示例：

import React, { useState } from 'react';

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

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

  return (
    <div>
      <h2>选择一个选项：</h2>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleOptionChange}
        />
        选项 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleOptionChange}
        />
        选项 2
      </label>
      <label>
        <input
          type="radio"
          value="option3"
          checked={selectedOption === 'option3'}
          onChange={handleOptionChange}
        />
        选项 3
      </label>
    </div>
  );
}

export default Modal;

这个例子中，我们使用 `useState` 钩子来定义一个名为 `selectedOption` 的状态变量，并使用 `setSelectedOption` 函数来更新它。每个单选框都有一个相应的值和 `onChange` 事件处理函数来更新选中的选项。通过检查 `selectedOption` 的值，我们可以确定选项是否被选中，并使用 `checked` 属性将其设置为对应的状态。