如果在React JS中選中複選框，如何隱藏或顯示div

Question

如何根據React JS中的複選框狀態（checked-unchecked）來顯示/隱藏div，我對React非常陌生，我知道如何在jQuery中這樣做，但在React上是另一種方法。提前致謝。

EDITED

想如果選擇與否的複選框，以顯示與一個className = 「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

此外，您還可以使用CSS類（與display財產）以切換（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> }