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

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

我在日历上方有两个输入； 'from' 和 'to' 日期输入：

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