Meteor Semantic-UI-React：聚焦组件

Question

我正在使用 Meteor、React 和 Semantic-UI 开发一个应用程序ui。我是这些 frameworks/libraries 的新手。阅读文档后，我仍然不明白如何将焦点设置在组件上，因为有些人说你还做不到，其他人说你可以但是他们的例子对我不起作用。在下面的示例中，options 被定义为常量并从另一个文档导入，而 changeHospital 和 changeActivity 函数只是设置 hospital 和 [=17= 的状态] 使用选项中的 data.value：

          <Form.Field
            label='Hospital'
            control={Select}
            fluid
            search
            value={this.state.hospital}
            placeholder='Select hospital'
            options={hospitals}
            onChange={this.changeHospital}
          />

          <Form.Field
            label='Activity'
            control={Select}
            search
            fluid
            value={this.state.app}
            placeholder='Select activity'
            options={apps}
            onChange={this.changeActivity}
          />

我想要什么？

提交第一个字段后，我想自动将焦点更改到下一个字段，而无需按 Tab 键或使用鼠标光标选择它。

稍后编辑

如果你比我理解得更多，你可以阅读语义-ui-react 组件的文档：https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js

他们说：

/** A dropdown can receive focus. */
tabIndex: PropTypes.oneOfType([
  PropTypes.number,
  PropTypes.string,
]),

Answer 1

免责声明：我不知道 semantic-ui-react，但我知道 react，所以这是一个基于你将如何使用普通 react 输入解决它的猜测。

// Add ref to the field you want to focus
<Form.Field
    ref="activityField"
    label="Activity"
    control={Select}
    search
    fluid
    value={this.state.app}
    placeholder="Select activity"
    options={apps}
    onChange={this.changeActivity}
/>

// Update function from previous input
changeHospital() {
    ... // do what you already do, then change focus
    this.refs.activityField.focus()
}

在 React 输入上调用 .focus() 会聚焦它，但 Form.Field 可能无法处理 .focus()，在这种情况下它不会工作。

Meteor Semantic-UI-React：聚焦组件

Meteor Semantic-UI-React: focusing components

reactive-programming

meteor

reactjs

semantic-ui

semantic-ui-react