如何实现表单中父问题选Yes时动态显示依赖问题？

看起来你已经搞定了页面加载时隐藏依赖问题的基础逻辑，接下来只需要添加父问题选中状态的跟踪，并动态判断依赖问题是否需要显示即可。下面是具体的实现步骤和代码示例：

1. 在父组件中维护选中答案的状态 #

首先，你需要在包含所有问题的父组件里，用state记录每个问题的选中答案ID。这样所有子问题组件都能实时获取到父问题的选中状态：

class QuestionForm extends React.Component {
  // 初始化状态：key是问题ID，value是选中的答案ID
  state = {
    selectedAnswers: {}
  };

  // 处理答案选择的回调函数，更新对应问题的选中状态
  handleAnswerSelect = (questionId, answerId) => {
    this.setState(prevState => ({
      selectedAnswers: {
        ...prevState.selectedAnswers,
        [questionId]: answerId
      }
    }));
  };

  render() {
    const { questions } = this.props; // 假设questions是你的问题数组
    return (
      <div className="question-form">
        {questions.map(question => (
          <QuestionComponent
            key={question.module_question_id}
            questionInfo={question}
            selectedAnswers={this.state.selectedAnswers}
            onAnswerSelect={this.handleAnswerSelect}
          />
        ))}
      </div>
    );
  }
}

2. 修改子组件的getWrapperClass方法 #

现在更新你原来的getWrapperClass方法，不再单纯根据parent_question_id判断隐藏，而是结合父问题的选中状态动态调整：

class QuestionComponent extends React.Component {
  getWrapperClass() {
    const { questionInfo, selectedAnswers } = this.props;
    
    // 没有父问题的普通问题，直接返回基础样式类
    if (!questionInfo.parent_question_id) {
      return `wrap-${questionInfo.question_type}`;
    }

    // 获取父问题当前选中的答案ID
    const parentSelectedAnswer = selectedAnswers[questionInfo.parent_question_id];
    // 判断是否满足显示条件：父问题选中的答案等于当前问题的依赖答案ID（即"Yes"的ID）
    const shouldDisplay = parentSelectedAnswer === questionInfo.dependant_answer_id;

    // 根据条件返回带/hide的样式类
    return `${shouldDisplay ? '' : 'hide'} wrap-${questionInfo.question_type}`;
  }

  render() {
    const { questionInfo, selectedAnswers, onAnswerSelect } = this.props;
    return (
      <div className={this.getWrapperClass()}>
        <h3>{questionInfo.question}</h3>
        {/* 渲染答案选项（以单选框为例，适配boolean类型的问题） */}
        {questionInfo.answers.map(answer => (
          <label key={answer.module_answer_id}>
            <input
              type="radio"
              name={`question-${questionInfo.module_question_id}`}
              value={answer.module_answer_id}
              checked={selectedAnswers[questionInfo.module_question_id] === answer.module_answer_id}
              onChange={() => onAnswerSelect(questionInfo.module_question_id, answer.module_answer_id)}
            />
            {answer.answer}
          </label>
        ))}
      </div>
    );
  }
}

3. 关键逻辑说明 #

• 父组件的selectedAnswers状态会实时更新，每当用户选择任意问题的答案时，都会触发handleAnswerSelect更新对应问题的选中ID。
• 依赖问题的显示逻辑：只有当父问题选中的答案ID等于自身的dependant_answer_id（也就是你提供的"Yes"的ID ec52835f-4782-11e8-a89b-408d5ce49fe0）时，才会移除hide类，显示出来。
• 初始状态下，selectedAnswers为空，所以依赖问题会保持隐藏，和你原来的逻辑完全一致。

可选优化：动态控制依赖问题的必填性 #

如果需要在依赖问题显示时自动设为必填，可以在子组件的输入框中动态修改required属性：

<input
  // ...其他属性
  required={shouldDisplay && questionInfo.is_required}
/>

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