Question

我正在尝试实现jQuery UI datepicker Inside Reactjs。一切似乎都很好，我可以从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>

Answer 1

添加jquery Ui对我没有帮助，但是，我能够实现一个带有反应的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"/>
   }})

在Reactjs中实现jquery UI Datepicker

1 个答案: