react中如何把单选框的值追加写入到数组中

在React中，你可以使用state来管理组件的状态，包括用户选择的单选按钮值。当用户点击单选按钮时，你可以通过事件处理函数更新状态，然后直接将这个值添加到状态数组中。下面是一个简单的例子：

import React, { useState } from 'react';

function RadioForm() {
  const [options, setOptions] = useState([]); // 初始化一个空数组用于存储选项

  function handleRadioChange(event) {
    const selectedOption = event.target.value; // 获取用户选择的单选框值
    setOptions([...options, selectedOption]); // 将新选中的值追加到数组中
  }

  return (
    <div>
      {/* 为每个单选按钮创建一个组 */}
      {['Option1', 'Option2', 'Option3'].map((option, index) => (
        <div key={index}>
          <input type="radio" name="myRadios" value={option} onChange={handleRadioChange} />
          <label>{option}</label>
        </div>
      ))}
      <p>Selected options: {options.join(', ')}</p> // 显示当前选中的选项
    </div>
  );
}

export default RadioForm;

在这个例子中，当你选择任何一个单选按钮时，`handleRadioChange`函数会被触发，它会将新的选项值添加到`options`数组中，并实时更新UI。