如何在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>
    )
  }
}