Question

我正在尝试：

只需点击一下按钮，即可立即输入两个日期输入（开始日期和结束日期）。
默认情况下，它们的值应该是今天的日期，即如果一个输入保持不变（并且选择了一个），然后单击按钮，则应分别由用户选择值和默认的今日日期。
输出应为yyyy / mm / dd
最合适的方法是什么？

我的方法：

import React, { Component } from 'react';
import '../App.css';

class DateSelector extends Component {

  constructor(props){
    super(props);
    this.state = {
      startDate:"yyyy-MM-dd",
      endDate:"yyyy-MM-dd"
    }
  }

  dateHandler = (event) => {
    console.log("startDate: "+this.state.startDate+" endDate:"+this.state.startDate);
  }

  startDateOnChange = (event) => {
    this.setState({startDate: event.target.value});
  }

  endDateOnChange = (event) => {
    this.setState({endDate: event.target.value});
  }

  render() {
    return (
      <div>
        START DATE<input type="date" id="startDate" value="{this.state.startDate}" onChange={this.startDateOnChange}/>
        END DATE<input type="date" id="endDate" value="{this.state.startDate}" onChange={this.endDateOnChange}/>
        <button type="submit" onClick={this.dateHandler}>Submit</button>
      </div>
    );
  }
}

export default DateSelector;

以上代码在Date标记的onChange事件中出现以下错误：

指定值“{this.state.startDate}”不符合所需格式，“yyyy-MM-dd”。

<button>代码onClick将空字符串设为startDate: endDate:

注意：我对网页设计很新。我做了相当的谷歌搜索，但没有找到任何相关的教程/文档/帖子。任何有关这类情况的指南/参考（供将来参考）都非常感谢。

Answer 1

通过在每个组件上定义value和onChange属性来控制日期输入组件。该值应来自组件状态。在onChange事件中，使用新值设置状态。

添加按钮组件，在onClick事件处理程序方法中，使用this.state.startDate和this.state.endDate检查每个输入的值。如果需要，您可以使用setState相应地调整它们的值。

如何在点击按钮时一次取两个输入的值？

1 个答案: