javascript - Reactjs 日期时间值未定义

Question

我正在使用 React js，但我很难从我的日期时间选择器中获取值/数据。

这是我的输入框:

<Form className="form1" onSubmit={this.handleSubmit}>
  <label>Date Started: </label>
  <Datetime dateFormat='YYYY-MM-DD'
            timeformat='hh-mm-ss'
            value={this.state.datestartedV}
            onChange={this.props.handleDatestarted} />

  <label>Date Ended: </label>
  <Datetime dateFormat='YYYY-MM-DD'
            timeformat='hh-mm-ss'
            value={this.state.dateendedV}
            onChange={this.props.handleDateended} />

  <Button onClick={this.handleSubmit}>SubmitRequest</Button>
</Form>

这是我的听众:

handleSubmit(event) {
  event.preventDefault();
  alert('Date is: ' + this.state.datestartedV + this.state.dateendedV); 
}

handleDatestarted(event) {
  this.setState({datestartedV: event.target.value});
}

handleDateended(event) {
  this.setState({dateendedV: event.target.value}); 
}

constructor(props) {
  super(props);
  this.state = {datestartedV: ''};
  this.state = {dateendedV: ''};
  this.handleDatestarted = this.handleDatestarted.bind(this);
  this.handleDateended = this.handleDateended.bind(this);
}

Answer 1

最初，this.state.datestartedV 是未定义的，因为您用第二个状态定义覆盖了初始状态。

将构造函数更改为:

constructor(props) {
  super(props);
  this.state = {
       datestartedV: '',
       dateendedV: ''
  };
  this.handleDatestarted = this.handleDatestarted.bind(this);
  this.handleDateended = this.handleDateended.bind(this);
}

假设您的问题的代码全部在一个组件中，那么您必须以这种方式在没有.props 的情况下使用您的函数:

     onChange={this.handleDatestarted} 

和

     onChange={this.handleDateended}