Question

我是新来的人，我在JS中有一个特定的领域，我想这是一个简单的问题，但是我已经搜索了2个小时，却没有找到满意的答案：（

我有以下复选框：

import helloworld
result = helloworld.sum(1,2)
print(result)

如果您点击“有孩子” 我希望以后显示与孩子有关的一些div。如果没有，则应将其隐藏。和其他选项一样。

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

Answer 1

该复选框应将状态切换为布尔值。

然后，如果状态值为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>

Answer 2

只需事先考虑数据结构。

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

如果选中了hdf5复选框，则显示与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> );方法。如果不确定如何操作，这里有codesandbox供您签出。

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

2 个答案: