javascript - React - 从不同的复选框显示/隐藏多个 div

Question

我是 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>

如果你点击“生 child ”我希望显示一些与 child 相关的 div。如果不是，则应隐藏它们。其他选项也一样。

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

Answer 1

复选框应切换状态中的 bool 值。

然后，如果 state 中的值为真，则有条件地渲染子项。

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

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

在您的类中创建状态值并使用 handleChange 方法切换它

state = {visibility: false}

handleChange = () => this.setState({visibility: !this.state.visibility})

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

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