- 首页
- 其他开发
- 如果在 React JS 中选中复选框，如何隐藏或显示 div
如果在 React JS 中选中复选框，如何隐藏或显示 div
[英] how to hide or show a div if checkbox is selected in React JS
本文介绍了如果在 React JS 中选中复选框，如何隐藏或显示 div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何根据 React JS 中的复选框状态(选中-未选中)显示/隐藏 div，我对 React 还很陌生，我知道如何在 jquery 中执行此操作，但在 React 上是另一种方法.提前致谢.
已编辑
想要显示/隐藏带有 className="showhidediv" 的 div，如果复选框被选中.
从'react'导入React；从 'react-dom' 导入 ReactDOM；从'react-document-title'导入文档标题；从react-stormpath"导入 { UserProfileForm }；从../components/Calendar"导入日历导出默认类 PatientPage 扩展 React.Component { render() {返回 (<DocumentTitle title={`PvSafety - D Patient`}><div className="容器流体"><div className="row"><div className="col-xs-12"><h3>D 患者</h3><小时/>
<div className="container-fluid" id = "dpatientBlock"><div className="row"><div className="panel panel-default"><div className="panel-heading"><form className="form-inline"><div className="复选框"><标签><input type="checkbox"/>怀孕
</表单>
<div className="row"><form className="form-horizontal" role="form"><div className="col-md-6"><div className="form-group"><label id="id_label_patientnameinitials" htmlFor="id_field_patientnameinitials" className="col-md-6 control-label2"><span className="e2bcode" id="E2BCodes" >D.1</span>患者(姓名或缩写)<div className="col-md-4" ><input className="form-control showhidediv" tabIndex="1" id="id_field_patientnameinitials" type="text" placeholder="maskable"/>
<div className="form-group"><label id="id_label_gpmedical" htmlFor="id_field_gpmedical" className="col-md-6 control-label2"><span className="e2bcode" id="E2BCodes">D.1.1.1</span>GP Medical<div className="col-md-4" ><input className="form-control" tabIndex="1" id="id_field_gpmedical" type="text" placeholder="maskable"/>
<div className="form-group"><label id="id_label_specialist" htmlFor="id_field_specialist" className="col-md-6 control-label2"><span className="e2bcode" id="E2BCodes">D.1.1.2</span>专家<div className="col-md-4" ><input className="form-control" tabIndex="1" id="id_field_specialist" type="text" placeholder="maskable"/>
解决方案
你可以这样做:
class Component extends React.Component {构造函数(){极好的();this.state = { 已检查:false };this.handleChange = this.handleChange.bind(this);}句柄变化(){this.setState({检查:！this.state.checked})}使成为() {const content = this.state.checked?<div>内容: 空值;返回
<div><label>检查</label><输入类型=复选框"已检查={ this.state.checked }onChange={ this.handleChange }/>
{ 内容 }
;}}
示例
此外，您可以使用 CSS 类(带有 display 属性)来切换(display: none/block;) 元素
render() {const hidden = this.state.checked ?'' : '隐藏';返回 <div><label>检查</label><输入类型=复选框"已检查={ this.state.checked }onChange={ this.handleChange }/>
<div className={ hidden }>1</div><div className={ hidden }>2</div><div className={ hidden }>3</div><div className="bold">3</div><div className={ hidden }>4</div>
;}
示例
how can I show/hide a div based on checkbox state(checked- unchecked) in React JS, I'm pretty new to React, I know how to do this in jquery but on React is another approach. thanks in advance.
EDITED
want to show / hide div with the className="showhidediv" if the checkbox is selected or not.
import React from 'react'; import ReactDOM from 'react-dom'; import DocumentTitle from 'react-document-title'; import { UserProfileForm } from 'react-stormpath'; import Calendar from '../components/Calendar'
export default class PatientPage extends React.Component { render() {
return (
<DocumentTitle title={`PvSafety - D Patient`}>
<div className="container-fluid">
<div className="row">
<div className="col-xs-12">
<h3>D Patient</h3>
<hr />
</div>
</div>
<div className="container-fluid" id = "dpatientBlock">
<div className="row">
<div className="panel panel-default">
<div className="panel-heading">
<form className="form-inline">
<div className="checkbox">
<label>
<input type="checkbox" />Pregnant
</label>
</div>
</form>
</div>
</div>
</div>
<div className="row">
<form className="form-horizontal" role="form">
<div className="col-md-6">
<div className="form-group">
<label id="id_label_patientnameinitials" htmlFor="id_field_patientnameinitials" className="col-md-6 control-label2">
<span className="e2bcode" id="E2BCodes" >D.1</span>Patient (name or initials)
</label>
<div className="col-md-4" >
<input className="form-control showhidediv" tabIndex="1" id="id_field_patientnameinitials" type="text" placeholder="maskable" />
</div>
</div>
<div className="form-group">
<label id="id_label_gpmedical" htmlFor="id_field_gpmedical" className="col-md-6 control-label2">
<span className="e2bcode" id="E2BCodes">D.1.1.1</span>GP Medical
</label>
<div className="col-md-4" >
<input className="form-control" tabIndex="1" id="id_field_gpmedical" type="text" placeholder="maskable" />
</div>
</div>
<div className="form-group">
<label id="id_label_specialist" htmlFor="id_field_specialist" className="col-md-6 control-label2">
<span className="e2bcode" id="E2BCodes">D.1.1.2</span>Specialist
</label>
<div className="col-md-4" >
<input className="form-control" tabIndex="1" id="id_field_specialist" type="text" placeholder="maskable"/>
</div>
</div>
解决方案
You can do it like this:
class Component extends React.Component {
constructor() {
super();
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.setState({
checked: !this.state.checked
})
}
render() {
const content = this.state.checked
? <div> Content </div>
: null;
return <div>
<div>
<label>Check</label>
<input
type="checkbox"
checked={ this.state.checked }
onChange={ this.handleChange } />
</div>
{ content }
</div>;
}
}
Example
Also, you can use CSS class(with display property) in order to toggle(display: none/block;) element
render() {
const hidden = this.state.checked ? '' : 'hidden';
return <div>
<div>
<label>Check</label>
<input
type="checkbox"
checked={ this.state.checked }
onChange={ this.handleChange } />
</div>
<div className={ hidden }>1</div>
<div className={ hidden }>2</div>
<div className={ hidden }>3</div>
<div className="bold">3</div>
<div className={ hidden }>4</div>
</div>;
}
Example
这篇关于如果在 React JS 中选中复选框，如何隐藏或显示 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
