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

我在日历上面有两个输入; a'从'和'到'日期输入：

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

如何在响应

1 个答案: