javascript - 将 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>

(还有更多代码，但我只展示了我实现它时的部分) 任何让它工作的提示都将不胜感激，我是 React JS 的新手，谢谢

Answer 1

假设您的构建系统是 webpack，您应该使用 provide 插件来确保加载 $ 和 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')
)