Javascript 反应-显示/隐藏来自不同复选框的多个div

我是react的新手，我在JS中有某个领域，我想这是一个简单的问题，但我已经搜索了2个小时，没有找到满意的答案：(

我有以下复选框：

<Col md="4">
  <FormGroup>
    <Label>Have Children</Label>
    <CustomInput type="radio" name="customRadio" label="Yes" value="yes" />
    <CustomInput type="radio" name="customRadio" label="No" value="no" />
  </FormGroup>
</Col>
<Col md="4">
  <FormGroup>
    <Label>Have Spouse</Label>
    ...(same as children input)
  </FormGroup>
</Col>
<Col md="4">
  <FormGroup>
    <Label>Have Family Members</Label>
    ...(same as children input)
  </FormGroup>
</Col>

生孩子
有配偶
…（与子项输入相同）
有家人
…（与子项输入相同）

如果你点击“生孩子” 我希望后面显示一些与子项相关的div。如果没有，则应隐藏它们。其他选项也是如此

---

我想知道最干净的方法是什么。

复选框应该在状态中切换布尔值

然后，如果state中的值为true，则有条件地呈现子级

因此，将选中值和更改处理程序附加到您的组：

      <FormGroup>
        <Label>Have Children</Label>
        <CustomInput type="radio" name="customRadio" label="Yes" value="yes" onChange={() => this.handleChange} checked={this.state.visibility} />
        <CustomInput type="radio" name="customRadio" label="No" value="no" onChange={() => this.handleChange} checked={!this.state.visibility}/>
      </FormGroup>

然后你可以根据可见性布尔值有条件地渲染你的东西，所以

<div>{this.state.visibility && <p>Now You see me</p>}</div>

{this.state.visibility&&现在你看到我了
}

只需事先考虑数据结构即可

根据你的问题，我假设你只是想要这样的东西：

const { checkboxes } = this.state;

return (
  <div>
    {checkboxes.map((checkbox, index) => (
      <div>
        <label>{checkbox.label}</label>
        <input type="checkbox" checked={checkbox.checked} onClick={() => this.toggleCheckBox(index)} />
        {checkbox.checked && <div>show this if the checkbox is checked</div>}
      </div>
    ))}
  </div>
);

如果选中了

子项

复选框，则显示与

子项相关的元素

如果选中了

配偶

复选框，则显示与

配偶

相关的元素

等等

在我看来，您需要一组复选框，其中包含每个状态（选中或未选中）。您可以将此信息存储在组件状态中

// in the constructor
this.state = {
  checkboxes: [
    { id: 1, label: 'children', checked: false },
    { id: 2, label: 'spouse', checked: false },
  ],
}

然后，在

render（）

函数中，只需像这样循环数组：

const { checkboxes } = this.state;

return (
  <div>
    {checkboxes.map((checkbox, index) => (
      <div>
        <label>{checkbox.label}</label>
        <input type="checkbox" checked={checkbox.checked} onClick={() => this.toggleCheckBox(index)} />
        {checkbox.checked && <div>show this if the checkbox is checked</div>}
      </div>
    ))}
  </div>
);

const{checkbox}=this.state；
返回(
{checkbox.map（（复选框，索引）=>(
{checkbox.label}
this.toggleCheckBox（索引）}/>
{checkbox.checked&&如果选中该复选框，则显示该复选框}
))}
);

---

只需记住在类中实现

this.toggleCheckBox

方法。如果您不确定如何实现，这里有一个供您签出的方法。

您可以有一个名为

ischildrendishow

的状态，当单击“have Children”时，您可以将其设置为

true

标签，并使用该状态变量有条件地呈现它。然后对其他两个表单组执行相同的操作。以下是关于条件呈现的React文档-值得一读：