Question

我正在使用Meteor，React和Semantic-UI构建应用程序。我是这些框架/库的新手。阅读完文档之后，我仍然不明白如何将注意力集中在一个组件上，因为有些人说你还不能这样做，有些人说你可以，但他们的例子对我不起作用。在下面的示例中，options被定义为常量并从另一个文档导入，changeHospital＆amp; changeActivity个函数只是使用选项中的hospital设置activity和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键或用鼠标光标选择它。

稍后修改

如果你能理解的比我更多，你可以在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

免责声明：我不知道语义 - 反应，但我确实知道反应，所以这是基于你如何用正常反应输入解决它的猜测。

{
    "name": "application-name",
    "productName": "Application Name",
    ...
    "config": {
        "forge": {
            ...
            "electronInstallerDebian": {
                "bin": "Application Name"
            }
            ...
        }
        ...
    }
    ...
}

在响应输入上调用// 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() }会将其重点关注，但.focus()无法处理Form.Field，并且在这种情况下它无法正常工作。< / p>

Meteor Semantic-UI-React：聚焦组件

1 个答案: