React JSでチェックボックスが選択されている場合、divを表示または非表示にする方法

Question

React JSでチェックボックスの状態（チェックボックスがオフ）に基づいてdivを表示/非表示にするにはどうすればよいですか？ jqueryでこれを行うが、Reactには別のアプローチがある。前もって感謝します。

EDITED

は、チェックボックスが選択されているかどうかクラス名=「showhidediv」と/非表示のdivを表示したいです。

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> 

Answer 1

をに基づいてレンダリングあなたはこのようにそれを行うことができます。

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

また、あなたは（display: none/block;）要素

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

Answer 2

まず、

getInitialState() { 
    return {}; 
}, 

handleChange() { 
    this.setState({ checked: !this.state.checked }); 
}, 

// Somewhere in render() 
<input type="checkbox" onChange={this.handleChange} checked={this.state.checked} /> 

次にチェックボックスに変更に耳を傾け、現在の状態

// Somewhere in render() 
{ this.state.checked && <div>is checked</div> }