如何自动打开反应 DatePicker答案

【问题标题】：How to auto open react DatePicker如何自动打开反应 DatePicker
【发布时间】：2017-02-18 15:35:03
【问题描述】：

我有以下代码

      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 有点陌生，我需要更多关于如何在我的代码中实现此代码的解释，所以如果有人能解释一下，那就太好了我应该把我的代码放在哪里来实现这个功能

非常感谢大家！

【问题讨论】：

标签： javascript reactjs datepicker

【解决方案1】：

您是否尝试过添加自动对焦属性，因为 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
    />
  );

【讨论】：

编辑我的答案：将您的代码添加到我的代码后，不幸的是我没有看到任何变化；添加“名称”代码会导致 grunt/browserify 错误。再次感谢！

【解决方案2】：

我相信open 道具可以帮助任何人。我尝试使用 autoFocus 但它不起作用，但 open prop 起作用了

https://github.com/Hacker0x01/react-datepicker/issues/1179#issuecomment-694880947

【讨论】：

【解决方案3】：

我终于找到了问题的答案。我的 react-datepicker 版本是 0.29.0 将其移至 0.30.0（通过更改 package.json 中的日志并运行 npm install）允许我直接在 datepicker 中使用新的 prop autoFocus

这是 0.30.0 版本的代码https://github.com/Hacker0x01/react-datepicker/releases/tag/v0.30.0

感谢大家的帮助:)

【讨论】：