[英]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
定义为常量并从另一个文档导入,而changeHospital
和changeActivity
函数仅通过选项中的data.value
设置hospital
和activity
的状态:
<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.