入力フィールドに値の変更が表示されない

Question

dateを選択すると、eventに何も表示されず、何も起こらず入力フィールドからvalueを抽出できません。何 **** ？ ReactやDatepickerに問題はありますか？日付ピッカー手動何であなたは国有財産dueDateに入力フィールドの値をバインドhttp://t1m0n.name/air-datepicker/docs/index.html

class MyComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     dueDate: 'Date and time' 
 
    } 
 
    } 
 

 
    componentDidMount(){ 
 
    this.initDatepicker(); 
 
    } 
 
    
 
    initDatepicker(){ 
 
    $(this.refs.datepicker).datepicker(); 
 
    } 
 
    
 
    render(){ 
 
    return (
 
     <div> 
 
     <h3>Choose date!</h3> 
 
     <input 
 
      value={this.state.dueDate} 
 
      type='text' 
 
      onChange={event => console.log(event)} 
 
      ref='datepicker' 
 
     /> 
 
     </div>  
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <MyComponent />, 
 
    document.getElementById('app') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/js/datepicker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/air-datepicker/2.2.3/css/datepicker.min.css" rel="stylesheet"/> 
 

 
<div id="app"></div>

Answer 1

、それについて言います。これを変更したい場合は、入力フィールドの変更時にstateプロパティを更新する必要があります。

onChange={event => this.setState({dueDate: event.target.value})} 

Answer 2

あなたは制御されたコンポーネントを書きました。あなたは入力要素に状態値を設定します。状態が変わると、入力値が変わります。したがって、コードを以下のように変更してください。

コードを変更すると、そのコードは正常に動作します。