React表单实现前置问题回答联动显示后续问题的方案咨询

核心思路是利用React的条件渲染，根据第一个问题的回答状态，控制后续输入框的显示与隐藏。

步骤1：明确状态判断逻辑 #

先确认edited.children的取值类型——如果是布尔值（true代表"是"，false代表"否"）就用布尔判断；如果是字符串（"yes"/"no"）就对应字符串匹配，你需要根据YesOrNoPicker组件实际返回的值调整。

步骤2：修改代码实现条件渲染 #

先补全原代码中缺失的组件标签（第二个Grid里的输入组件未定义，这里假设是数字输入组件NumberInput，你可以根据实际业务替换），再添加条件判断逻辑：

<Grid item xs={3} className={classes.item}>
  <PublishedComponent
    pubRef="niue.YesOrNoPicker"
    label="AddDiafForm.children"
    value={edited.children}
    onChange={v => this.updateAttribute("children", v)}
  />
</Grid>

{/* 回答"是"时，显示"您有几个子女？" */}
{edited.children === true && (
  <Grid item xs={1} className={classes.item}>
    <NumberInput
      module="DiaForm" 
      label="AddDiafForm.howmany?"
      value={edited.howmany}
      onChange={v => this.updateAttribute("howmany", v)}
    />
  </Grid>
)}

{/* 回答"否"时，显示"您是否想要领养？" */}
{edited.children === false && (
  <Grid item xs={1} className={classes.item}>
    <TextInput
      module="DiaForm" 
      label="AddDiafForm.adopt?"
      value={edited.adopt}
      onChange={v => this.updateAttribute("adopt", v)}
    />
  </Grid>
)}

关键说明 #

1. 条件渲染语法：用&&运算符实现简单条件渲染，当左侧条件为真时才渲染右侧JSX；如果需要更复杂分支，也可以用三目运算符condition ? <组件A /> : <组件B />。
2. 状态更新触发重渲染：确保updateAttribute方法能正确更新组件的edited状态（比如通过setState或状态管理工具），状态变化后React会自动重新渲染，实现动态显示/隐藏。
3. 初始状态处理：如果edited.children初始值为undefined，两个后续输入框会默认隐藏，用户选择后才会显示对应内容，符合表单交互逻辑。

补充：若edited.children是字符串值 #

如果YesOrNoPicker返回的是字符串（比如"yes"/"no"），只需调整判断条件：

{edited.children === "yes" && (...)}
{edited.children === "no" && (...)}

内容的提问来源于stack exchange，提问作者Amadou Tejan Jallow