javascript - React - 显示/隐藏来自不同复选框的多个 div
问题描述
我是新手,我在 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>
在您的类中创建状态值并使用 handleChange 方法切换它
state = {visibility: false}
handleChange = () => this.setState({visibility: !this.state.visibility})
然后你可以根据可见性布尔有条件地渲染你的东西,所以......
<div>{this.state.visibility && <p>Now You see me</p>}</div>
推荐阅读
- sql - 你如何加入两个计算的sql语句?
- c++ - SendMessageW 返回“无效的窗口句柄”
- python - 请求解释一段关于字典的基本python代码
- html - 动态更改文本,例如仅使用 css 翻译 html 文档?
- css - “CenterVertical”属性不会将模态引导框定位在屏幕中央
- java - 将java第三方对象转换为不同名称的json
- docker - 从 docker 容器中的转储中恢复时,为什么某些 mysql 表会丢失?
- android - CocoaPods 未安装 - 错误:无法构建 gem 原生扩展
- spring-boot - REST API - 哪些 Http 状态代码用于预订 API?
- c# - Windows 窗体应用程序 System.Data.Entity.Core.EntityException InnerException :ArgumentException