将jquery ui datepicker集成到React JS中

Question

我正在尝试使用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 className="form-group">
    <label id="id_label_dateofbirth" htmlfor="id_field_dateofbirth" className="col-md-6 control-label2">
        <span className="e2bcode" id="E2BCodes">D.2.1</span>Date of Birth
    </label>
    <div className="col-md-3 divhidetxtdpatient" id="showhidemasked">
        <div id="dpick"></div>
    </div>
</div>

(还有更多的代码,但是我只是在实现这个时才显示该部分)任何使其工作的提示都将受到赞赏,我是新的反应JS,谢谢

Answer 1

假设您的构建系统是webpack,您应该使用提供插件来确保加载$和jQuery ...

new webpack.ProvidePlugin({
  Promise: 'bluebird',
  jQuery: 'jquery',
  $: 'jquery',
  React: 'react'
})

另外,将jquery-ui添加到主entry.js之前的条目列表中

以下是您将大致需要的ES6类

//DatePicker.js
export default class DatePicker extends React.Component {
  componentDidMount() {
    $(this.refs.input).datepicker();
  }

  componentWillUnmount() {
    $(this.refs.input).datepicker('destroy');
  }

  render() {
    const props = this.props;
    return <input ref="input" type="date" {...props} />
  }
}

//entry.js
import ReactDOM from 'react-dom';
import DatePicker from './DatePicker';

ReactDOM.render(
  <DatePicker 
    value="2015-01-01" 
    onChange={(evt)=>console.log('new date', evt.target.value)} 
  />, 
  document.getElementById('dpick')
)