¿cómo puedo mostrar/ocultar un div basado en la casilla de verificación estado(activado – desactivado) en Reaccionar JS, soy bastante nuevo para Reaccionar, yo sé cómo hacer esto en jquery, pero en Reaccionar es otro enfoque. gracias de antemano.

EDITADO

desea mostrar /ocultar el div con el className=»showhidediv» si la casilla de verificación está seleccionada o no.

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>
InformationsquelleAutor Kevin Lopez | 2016-03-21

2 Comentarios

  1. 12

    Usted puede hacer esto de esta manera:

    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>;
    }
    }

    Ejemplo

    También, usted puede utilizar CSS clase(con display propiedad) con el fin de alternar(display: none/block;) elemento

    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>;
    }

    Ejemplo

  2. 0

    Primero, escuchar a los cambios en la casilla de verificación

    getInitialState() {
    return {};
    },
    handleChange() {
    this.setState({ checked: !this.state.checked });
    },
    //Somewhere in render()
    <input type="checkbox" onChange={this.handleChange} checked={this.state.checked} />

    Entonces, de render basado en el estado actual

    //Somewhere in render()
    { this.state.checked && <div>is checked</div> }
    • buen enfoque, voy a tomar eso en cuenta.

Dejar respuesta

Please enter your comment!
Please enter your name here