Question

当我选择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>

Answer 1

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

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

Answer 2

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

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

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

如果您更改代码，它的工作正常。

React输入字段看不到值更改

2 个答案: