如何在 ReactJS 中获取日期输入的值？

Question

我有一个输入日期的注册表单。

我的日期输入代码是：

birthDate: new Date(),

this.handleSubmit = this.handleSubmit.bind(this);
this.handledChange = this.handledChange.bind(this);


handledChange(date) {
  this.setState({
    birthDate: date
  });
}

<ControlLabel>Date de naissance</ControlLabel>
  <FormGroup controlId="birthDate" bsSize="large">
    <FormControl
      autoFocus
      type="date"
      value={this.state.birthDate}
      onChange={this.handledChange}
    />
  </FormGroup>

我提交的时候，控制台输入的日期是undefined。

我想要它的格式：YYYY-MM-DD

请问我该如何解决？

Answer 1

你不会直接得到选定的日期，它应该是通过事件目标

改变

handledChange(date) {
    this.setState({
      birthDate: date
    });
  }

到

handledChange(event) {
    this.setState({
      birthDate: event.target.value
    });
  }

Answer 2

您还可以在提交后使用表单的 ID 提取表单的输入值。
您可以尝试在您的提交方法中使用这样的：

让 selectedDate = document.getElementById('birthDate')

这里的BirthDate是指FormGroup的controlId

Answer 3

这就像一个宝石。如果您仍然遇到问题，请尝试一下

             <input
                type="date"
                name="expiration date"
                value={this.state.expiration_date}
                onChange={event => this.setState({expiration_date: event.target.value})} 
              />

onChange = (key, value) => {
    this.setState({
      [key]: value
    })
  }