React - 显示/隐藏来自不同复选框的多个 div答案

【问题标题】：React - Show/Hide multiple divs from different check boxesReact - 显示/隐藏来自不同复选框的多个 div
【发布时间】：2019-03-16 12:15:22
【问题描述】：

我是 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。如果没有，它们应该被隐藏。其他选项也一样。

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

【问题讨论】：

您可以有一个名为 isChildrenShown 的状态，当您单击“有孩子”标签时将其设置为 true，并使用该状态变量有条件地呈现它。然后对其他 2 个表单组执行相同操作。
这里是关于条件渲染的 React 文档——值得一读：reactjs.org/docs/conditional-rendering.html

标签： javascript reactjs

【解决方案1】：

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

然后，如果 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>

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

state = {visibility: false}

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

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

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

【讨论】：

【解决方案2】：

只要事先想好数据结构。

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

如果选中children 复选框，则显示与children 相关的元素
如果选中spouse 复选框，则显示与spouse 相关的元素。
等

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

// 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>
);

只记得在类中实现this.toggleCheckBox 方法。如果您不确定如何操作，这里有一个codesandbox 供您查看。

【讨论】：