在 Reactjs 中实现 jquery UI Datepicker答案

【问题标题】：Implementing jquery UI Datepicker inside Reactjs在 Reactjs 中实现 jquery UI Datepicker
【发布时间】：2017-06-21 10:26:46
【问题描述】：

我正在尝试在 Reactjs 中实现 jQuery UI datepicker。一切似乎都很好，我可以从日期选择器中选择日期。问题是我在输入的 onChange 事件上运行一个函数，该函数没有触发。

<!DOCTYPE html>
<html>
<head>
	 <link rel="stylesheet" href="main.css" />
	 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
    
    <div id="example" ></div>

	<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
	<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js" ></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script type="text/babel">

		var DatePicker = React.createClass({
		    _destroyDatePicker: function(){
		        var element = this.refs.input;
		        $(element).datepicker('destroy');
		    },
		    _initDatePicker: function(){
		        var element = this.refs.input;
		        $(element).datepicker(this.props);    
		    },
		    componentDidMount: function(){
		        this._initDatePicker();
		    },
    	    componentWillUnmount: function(){
		        this._destroyDatePicker();
		    },
		    render: function() {
		        return <input ref="input" type="text" onChange={(evt)=>console.log('new date', evt.target.value)} {...this.props}/>
		    }
		});

		ReactDOM.render(<DatePicker defaultValue="05/30/2017" />, document.getElementById('example'));
	
	</script>
</body>
</html>

【问题讨论】：

React 和 jQuery 不应该真正结合在一起，因为 React 为合成事件构建了一个虚拟 DOM 表示。您是否考虑过任何现有的 React 组件库来选择日期？一个简单的谷歌搜索“反应日期选择器”应该会得到许多不同的结果。

标签： jquery reactjs jquery-ui datepicker

【解决方案1】：

添加 jquery Ui 对我没有帮助，但是，我可以使用 react 实现一个 datetimepicker 插件，并且效果很好

var ReactDatePicker = React.createClass({
_initDatePicker: function () {
    var $this = this;
    var element = this.refs.input;
    $(element).datetimepicker({
        timepicker: false,
        format: 'Y/m/d',
        onChangeDateTime: this._updateDate
    });
},
_updateDate: function () {
     console.log("new value ",this.refs.input.value);
},
_destroyDatePicker:function(){
    var element = this.refs.input;
    $(element).datetimepicker('destroy');
},
componentDidMount:function(){
    this._initDatePicker();
},
componentDidUpdate: function () {
    this._initDatePicker();
},
componentWillUnmount: function () {
    this._destroyDatePicker();
},
render: function() {
    return <input ref="input" value={this.props.value} type="text"/>
   }})

【讨论】：