如何在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的格式显示。请问我该怎么解决？

- Ichrak Mansour

Answer 1

你无法直接获取选定日期，而是应该通过事件目标进行获取。

更改

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

To

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

- Hemadri Dasari

---

仍然是同样的问题，它是“未定义的”。 - Ichrak Mansour

Answer 2

在提交表单后，您还可以使用其Id提取表单的输入值。

您可以尝试在提交方法中使用以下方法：

let selectedDate = document.getElementById('birthDate')

这里的BirthDate是FormGroup的controlId。

- L Dorado

---

这是同样的问题。 - Ichrak Mansour

我脑海中想到一个小问题。你确定在提交时调用了你的提交处理程序吗？ - L Dorado

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
    })
  }

- Aravind Reddy

---

这种方法相较于被接受的答案有哪些优势？当回答已有被接受答案的老问题时，非常重要的一点是指出你的答案解决了问题的哪个新方面。仅包含代码的答案几乎总是可以通过添加一些关于它们如何以及为什么工作的解释来改进。 - Jason Aller

@JasonAller 什么被接受的答案？根本没有被接受的答案，而且 OP 说那些答案对他都不起作用。事实上，Aravind 的方法才是正确的方法。 - msqar