React輸入字段沒有看到值變化

當我選擇date時，event沒有看到任何東西，什麼都沒有發生，我無法從輸入字段中提取我的value。什麼 **** ？它有問題React或Datepicker嗎？在日期選擇器手動沒什麼要說的就是，http://t1m0n.name/air-datepicker/docs/index.html React輸入字段沒有看到值變化

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>

來源

2017-07-01 Ramzan Chasygov

我建議你使用material-ui作爲React。它完美的作品。 –

謝謝，爲什麼從來沒有聽說過它。 –

您綁定的輸入字段值傳遞給國家財產dueDate。現在，如果要修改它，則必須刷新輸入字段更改的狀態屬性，因此：

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

來源

2017-07-01 21:12:53 Nhor

您寫了一個受控組件。您將一個狀態值設置爲輸入元素。如果狀態改變，你的輸入值會改變。所以你改變下面的代碼，

// input element 
    <input value={this.state.dueDate} onChange={this.handleDueDate}/> 

    // handleDueDate method 
    handleDueDate(event){ 
     this.setState({ 
      dueDate: event.target.value 
     }) 
    }

如果你改變你的代碼的樣子，它的工作正常。

來源

2017-07-01 21:18:43 Vasi

React輸入字段沒有看到值變化

回答

相關問題