在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

回答

相關問題