React中多组单选按钮组互相干扰问题求助

我明白你遇到的困扰了——明明给每组单选按钮设置了不同的name，但选第二组时第一组的选中状态会被清空，输入框也跟着消失。核心问题出在你用了全局共享的单一状态变量来管理所有组的状态，这些变量同一时间只能保存一组的数据，自然会互相干扰。

下面是修复后的完整代码，我会在后面拆解关键改动点：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MainForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 改成对象存储每组的独立状态，键为组的name（比如emailPermission）
      groupStates: {}
    };
  }

  // 针对具体组处理单选框变化
  handleRadioChange(groupName, event) {
    const { value } = event.target;
    // 判断是否选中"Yes"选项（只有选Yes才显示输入框）
    const shouldShowField = value.includes('Yes');
    
    this.setState(prevState => ({
      groupStates: {
        ...prevState.groupStates,
        [groupName]: {
          checkedValue: value,
          isFieldVisible: shouldShowField
        }
      }
    }));
  }

  renderCheckboxComponent(answer) {
    const groupName = answer[0]?.name;
    const groupState = this.state.groupStates[groupName] || {};

    return (
      <div className="form__field--wrapper">
        {answer.map((item, index) => (
          <div key={item.id} className="form__checkbox form__checkbox--inline">
            <label
              className="form__checkbox required"
              htmlFor={`item.label-${item.name}-${index}`}
            >
              {item.label}
            </label>
            <input
              type="radio"
              id={`item.label-${item.name}-${index}`}
              name={item.name}
              value={item.value}
              // 单选框用onChange更符合语义，切换同组选项时自动触发
              onChange={(e) => this.handleRadioChange(groupName, e)}
              checked={groupState.checkedValue === item.value}
            />
            <span />
          </div>
        ))}
      </div>
    );
  }

  renderFieldInputComponent(fields, groupName) {
    const groupState = this.state.groupStates[groupName] || {};
    // 仅当当前组需要显示输入框时才渲染
    if (!groupState.isFieldVisible) return null;

    return (
      <div>
        {fields.map(item => (
          <div key={item.id} className="form__row">
            <label className="required" htmlFor={item.name}>
              {item.label}
            </label>
            <input
              type={item.type}
              id={item.name}
              name={item.name}
              required={item.required}
              placeholder={item.placeholder}
            />
            <span />
          </div>
        ))}
      </div>
    );
  }

  render() {
    const { data } = this.props;

    return (
      <form>
        {data.map(item => (
          <div key={item.id} className="form__row form__row--checkbox">
            <p className="form__row--label">{item.name}</p>
            {this.renderCheckboxComponent(item.answer)}
            {this.renderFieldInputComponent(item.field, item.category)}
          </div>
        ))}
        <button type="button" className="btn btn--red">Update Preferences</button>
      </form>
    );
  }
}

MainForm.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number,
      name: PropTypes.string,
    }).isRequired
  ).isRequired,
};

export default MainForm;

关键改动说明： #

1. 状态结构重构：把原来的isChecked、checkedState等全局单一状态，改成groupStates对象。每个组的name作为键，存储该组独有的checkedValue（选中的单选值）和isFieldVisible（是否显示输入框），彻底实现组间状态隔离。
2. 事件逻辑优化：将onClick替换为onChange——这是单选框的标准事件，切换同组选项时会自动触发，逻辑更严谨。同时用函数式setState更新状态，避免状态覆盖问题。
3. 渲染逻辑调整：
   • 渲染单选框时，仅读取当前组的checkedValue判断是否选中，不再依赖全局状态。
   • 渲染输入框时，根据当前组的isFieldVisible决定是否显示，不再受其他组操作影响。
4. 输入框属性修正：把输入框的id和name改为使用数据项自身的item.name，避免不同组的输入框出现属性冲突。

另外，你提供的数据中每个选项的checked属性可以移除了——现在是完全受控组件，状态由组件内部的groupStates管理，不需要依赖数据里的默认值。如果需要默认选中某个选项，只需在constructor初始化groupStates时给对应组设置初始值即可。

内容的提问来源于stack exchange，提问作者NiseNise