Question

我有以下代码

INSERT

这会在我的着陆页上加载反应日期选择器。

由于它已被大量使用，我想通过在页面加载时自动打开datepicker使其更加用户友好。我一直在寻找，但我还没有找到一个简单直接的方法。

我找到了这个主题（https://github.com/Hacker0x01/react-datepicker/issues/276），但由于我对Javascript和React有点新手，我需要更多关于如何在我的代码中实现这个代码的解释，所以如果有人能做的话会很棒向我解释我应该把我的代码放在哪里来实现这个功能

非常感谢大家！

Answer 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
    />
  );

Answer 2

我终于找到了问题的答案。我的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

的代码

感谢大家的帮助：）

Answer 3

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

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

如何自动打开反应DatePicker

3 个答案: