保留React中一组单选按钮中的选定值

Question

我通过这种方式在表单中具有不同的单选按钮组：

<form onSubmit={handleSubmit}>
    {FormData.map(formDetails => {
      return (
        <div className='form-options' key={formDetails.id}>
          <h2 className='form-option__title'>{formDetails.title}</h2>
          <p className='form-option__description'>
            {formDetails.description}
          </p>
          <fieldset>
            {formDetails.options.map(formOptions => {

              const getScore = e => {
                setCheck(formOptions.id);
                if (typeof formOptions.value === 'string') {
                  setScore(0);
                } else {
                  setScore(e.target.value);
                }
              };

              return (
                <RadioOption
                  key={formOptions.id}
                  htmlFor={formOptions.id}
                  type='radio'
                  id={formOptions.id}
                  name={formOptions.name}
                  value={formOptions.value}
                  onChange={getScore}
                  checked={check === formOptions.id}
                />
              );
            })}
          </fieldset>
        </div>
      );
    })}
    ...
  </form>

发生的情况是，当我在不同的字段集中选择一个单选选项时，它并没有使上一个选项保持选中状态。

Answer 1

找到了解决方案。主要错误在于名称属性，每个单选按钮都有不同的名称。将其更改为组内相同并且可以工作。还更新了onChange函数并创建了不同的组件。