如何自動開啓做出反應的DatePicker

我有以下代碼如何自動開啓做出反應的DatePicker

 case 'date': 
    if (Modernizr.touchevents && Modernizr.inputtypes && Modernizr.inputtypes.date) { 
     element = (
     <input 
      type='date' 
      id={this.props.id} 
      name={this.props.name} 
      onChange={arg => this.changeValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))} 
      onBlur={arg => this.blurValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))} 
      value={this.getValue() ? moment(this.getValue()).format('YYYY-MM-DD') : moment(this.props.minDate).format('YYYY-MM-DD')} 
      tabIndex={this.props.tabIndex} 
      min={this.props.minDate || null} 
      max={this.props.maxDate || null} 
     /> 
    ); 
    } else { 
     element = (
     <DatePicker 
      {...this.props} 
      name={this.props.name} 
      onChange={this.changeValue} 
      selected={this.getValue() || this.props.selected} 
      startDate={this.props.startDate || null} 
      endDate={this.props.endDate || null} 
      minDate={this.props.minDate || null} 
      tabIndex={this.props.tabIndex} 
      placeholderText={this.props.placeholder} 
      ref={this.props.elRef} 
      disabled={this.props.disabled} 
      showYearDropdown={this.props.showYearDropdown} 
      locale={this.lang} 
     /> 
    ); 
    } 
    break; 
}

這將加載目標網頁上的反應，日期選擇器。

由於它已被使用了很多，我想通過在頁面加載時自動打開日期選擇器來使它更加用戶友好。我一直在尋找很多，但我還沒有找到一個簡單，直接的方法。

我發現了這個主題（https://github.com/Hacker0x01/react-datepicker/issues/276），但由於我對Javascript和React有點新，所以我需要更多解釋如何在我的代碼中實現這個代碼，所以如果任何人都可以向我解釋在哪裏我應該把我的代碼來實現這個功能

非常感謝大家！

來源

2016-10-10 El-Cortez

您是否嘗試過加入自動對焦性能，因爲打開的DatePicker的onfocus

<input type="text" name="inputname" autofocus>

應該工作:)

爲您的代碼：

element = (
    <input 
     type='date' 
     id={this.props.id} 
     name={this.props.name} 
     onChange={arg => this.changeValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))} 
     onBlur={arg => this.blurValue(moment(arg && arg.currentTarget ? arg.currentTarget.value : arg))} 
     value={this.getValue() ? moment(this.getValue()).format('YYYY-MM-DD') : moment(this.props.minDate).format('YYYY-MM-DD')} 
     tabIndex={this.props.tabIndex} 
     min={this.props.minDate || null} 
     max={this.props.maxDate || null} 
     autofocus 
    /> 
);

來源

2016-10-10 08:55:20 jogoe

編輯我的答案代碼：增加你的代碼，礦難發生後，我沒有看到任何改變不幸;添加'name'代碼會導致grunt/browserify錯誤。再次感謝！ –