反应输入字段没有看到值变化答案

【问题标题】：React input field doesn't see value changing反应输入字段没有看到值变化
【发布时间】：2017-07-01 21:07:57
【问题描述】：

当我选择date 时，event 什么也没看到，什么也没发生，我无法从输入字段中提取我的value。什么 **** ？是 React 还是 Datepicker 的问题？在 datepicker 手册中什么也没说，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>

【问题讨论】：

我建议你为 React 使用 material-ui。效果很好。
谢谢，为什么没听说过。

标签： javascript jquery reactjs datepicker

【解决方案1】：

您将输入字段值绑定到状态属性dueDate。现在如果你想修改它，你必须在输入字段更改时刷新 state 属性，因此：

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

【讨论】：

【解决方案2】：

您编写了一个受控组件。您将状态值设置为输入元素。如果状态发生变化，您的输入值也会发生变化。所以你改变下面的代码，

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

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

如果你改变你的代码看起来像，它工作正常。

【讨论】：