如何在反应中集中输入日期字段？答案

【问题标题】：How to focus input date field in react?如何在反应中集中输入日期字段？
【发布时间】：2019-07-26 12:15:55
【问题描述】：

你能告诉我如何在反应中集中输入日期字段吗？我正在使用语义插件 https://www.npmjs.com/package/semantic-ui-calendar-react

我想将日期输入字段集中在按钮上，点击这里是我的代码。这是我的代码 https://codesandbox.io/s/3l414mno5

focus = () => {
    console.log(this.a);
    this.a[0].onFocus();
    // this.inputRef.focus()
  };

焦点没有出现在输入字段中，为什么？有更新吗？

【问题讨论】：

您是否期待像codesandbox.io/s/j4nloxq1m5 这样的解决方案？
但是如果我有 50 个日期字段，我需要创建 50 个创建 ref.solution 是正确的。但是实现
有没有更好的方法来做同样的事情
您可以改为创建动态引用。我的解决方案有用吗？
@tanmay 你可以检查这个github.com/arfedulov/semantic-ui-calendar-react/blob/master/src/… 你可以检查这个.logButton.current 的控制台，它提供了可用的选项

【解决方案1】：

要启用对按钮单击的关注，您需要像这样设置一个引用：

    this.logButton = React.createRef();
    ref={this.logButton}

并通过点击按钮访问它，如下所示：

focus = e => {
    this.logButton.current.openPopup();
};

openPopup() - 是一个打开日历弹窗的功能，你使用的插件，有这样的代码，检查here

demo 和在多个数据字段中，使用动态引用。希望对您有所帮助。

【讨论】：