小编Kev*_*pez的帖子

我有一个复选框,我想要实现的是隐藏div复选框的时间,并在Angular 2.0 beta中取消选中时显示.

我知道如何使用此代码在角度1.2中执行此操作

<label>
     <input type="checkbox" ng-model="showhidepregnant"/> Pregnant
</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

关于的代码 div

<div class="col-md-4 divhidetxtdpatient" ng-hide="showhidemasked">
      <input class="form-control" tabindex="1" id="id_field_specialist" ng-model="id_field_specialist" type="text" ng-blur="savespecialist()" placeholder="maskable"/>
</div>

提前致谢.

我正在尝试使用React js将jquery ui datepicker集成到输入文本上,我有这个jsbin,http: //jsbin.com/diyifa/edit？html,js .

我有一个名为Datepicker.js的组件

import React from 'react';
import ReactDOM from 'react-dom';
import {UserProfileForm} from 'react-stormpath';

export default class DateInput extends React.Component {
    render() {
        return (
            <input type="text" className="datepicker"/>
        )
    }
}
export default class Calendar extends React.Component {
    componentDidMount: function () {
        $('.datepicker').datepicker();
        render()
        {
            return (
                <DateInput/>
            )
        }
    }
}
ReactDOM.render(
    <Calendar/>, document.getElementById('dpick')
);

我想在我的名为PatPage.js的页面中调用此组件

import React from 'react';
import DocumentTitle from 'react-document-title';
import {UserProfileForm} from 'react-stormpath';
import {Calendar} from './Datepicker.js';

<div …

如何根据React JS中的复选框状态(选中 - 未选中)显示/隐藏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> …