如何在React中为日期范围选择选择不同的输入

Question

我正在使用一个简单的create-react-app和react-calendar-pane（ https://github.com/brillout/awesome-react-components ）从头开始为日历开发一个简单的日期范围选择器。

日历通过以下方式被称为组件：

<Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />

在日历上方有两个输入； “开始”和“结束”日期输入：

<label> From <input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /> </label>
<label> To <input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /> </label>

我正在使用onClickFromDate和onClickToDate来调用单击输入的活动状态。 然后onSelect在控制台中显示已从日历中进行选择。

我面临的问题是我无法弄清楚如何分隔两个输入，因此当单击“ from”输入时，用户可以从日历中选择一个日期，而该日期将出现在“ from”中”，“ to”输入也是如此。

就像我现在的代码一样，当从日历中选择一个日期时，两个输入都会显示从日历中选择的日期，而单击输入则不会执行任何操作。 我知道这是使用onSelect={this.onSelect}调用的，但是我不知道如何区分两个输入来为此日历创建一个简单的日期范围选择器。

完整代码（App.js）：

class App extends React.Component {
  constructor(){
    super();
    this.state={ fromDate:moment(), toDate:moment() };
  }

  onSelect=(e)=>{
    console.log('this is a date being selected');
  }

  onClickFromDate=(e)=>{
    console.log('this is a from date');
  }

  onClickToDate=(e)=>{
    console.log('this is a to date');
  }

  render() {
    return(
      <div>
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <label> From <input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /> </label>
          <label> To <input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /> </label>
          <Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />
        </div>
      </div>
    )
  }
}

Answer 1

单击选择时，设置clicktype值。 使用此值在onselect方法中设置相应的日期

  class App extends React.Component {
  constructor(){
    super();
    this.state={ 
     fromDate:moment(), 
     toDate:moment()  
     clicktype:null //1 for fromdate, 2 for todate  
     };
  }

  onSelect=(e)=>{

    console.log('this is a date being selected');
   if(this.state.clicktype==1){ //set from date  }
    else{ //set to date  }
  }

  onClickFromDate=(e)=>{
    console.log('this is a from date');
    this.setState({ clicktype:1})
  }

  onClickToDate=(e)=>{
    console.log('this is a to date');
    this.setState({ clicktype:2})
  }

  render() {
    return(
      <div>
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <label> From <input type="text" onClick={this.onClickFromDate} value={this.state.fromDate.format('DD/MM/YYYY')} /> </label>
          <label> To <input type="text" onClick={this.onClickToDate} value={this.state.toDate.format('DD/MM/YYYY')} /> </label>
          <Calendar date={moment("23/10/2015", "DD/MM/YYYY")} onSelect={this.onSelect} />
        </div>
      </div>
    )
  }
}