在Reactjs中实现jquery UI Datepicker

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" href="main.css" /> 
 
\t <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> 
 

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

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

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

来源

2017-06-21 codegeek

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

添加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"/> 
    }})

来源

2017-07-14 06:17:03 codegeek

在Reactjs中实现jquery UI Datepicker

回答

相关问题