在 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>

发生的事情是，当我 select 一个不同字段集中的单选选项时，它不会保留选项 select 在前一个中编辑。

Answer 1

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

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

Keep selected value in a set group of radio buttons in React

forms

fieldset

reactjs