Yanıt kutusu JS

Question

'da onay kutusu seçiliyken nasıl bir kutunun nasıl gizlendiğini veya gösterileceğini nasıl gösterebilirim? Nasıl Yapabilirim? bunu jquery'de yap ama React başka bir yaklaşımdır. şimdiden teşekkürler.

onay kutusunun seçili olup olmadığını className = "showhidediv" ile/gizlemek div göstermek istiyorum DÜZENLENMİŞ.

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

dayalı kılmasıdır Böyle yapabilirsiniz:

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

Ayrıca, (display: none/block;) elemanını

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

Birincisi,

getInitialState() { 
    return {}; 
}, 

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

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

Sonra onay kutusunu değişiklikleri dinlemek, mevcut durumu

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