简体   繁体   English

Meteor Semantic-UI-React:聚焦组件

[英]Meteor Semantic-UI-React: focusing components

I am building an app with Meteor, React and Semantic-UI. 我正在使用Meteor,React和Semantic-UI构建应用程序。 I am new in these frameworks/libraries. 我是这些框架/库的新手。 After reading the docs, I still don't understand how to set the focus on a component, because some say you can't do it yet, others say that you can but their example doesn't work for me. 阅读文档后,我仍然不了解如何将重点放在组件上,因为有些人说您还不能做到这一点,另一些人说可以,但是他们的示例对我不起作用。 In the below example the options are defined as constants and imported from another document, and the changeHospital & changeActivity functions just set the state of the hospital and activity with the data.value from the options: 在下面的示例中,将options定义为常量并从另一个文档导入,而changeHospitalchangeActivity函数仅通过选项中的data.value设置hospitalactivity的状态:

          <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}
          />

What do I want? 我想要什么?

After submitting the first field I want to change the focus on the next field automatically without pressing the tab key or selecting it with the mouse cursor. 提交第一个字段后,我要自动更改下一个字段的焦点,而无需按Tab键或用鼠标光标选择它。

Later edit 以后编辑

If you can understand more than me you can read the docs for the semantic-ui-react component at: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/Dropdown.js 如果您对我的理解不止,可以在以下网址阅读语义UI响应组件的文档: https : //github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Dropdown/ Dropdown.js

They say: 他们说:

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

Disclaimer: I don't know semantic-ui-react, but I do know react, so this is a guess based on how you would solve it with a normal react input. 免责声明:我不知道语义UI反应,但是我知道反应,因此这是基于您如何使用常规反应输入来解决它的猜测。

// 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()
}

Calling .focus() on a react input focuses it, but it's possible that Form.Field does not handle .focus() and in that case it won't work. 在react输入上调用.focus()会将其聚焦,但是Form.Field可能无法处理.focus() ,在这种情况下它将无法工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM