我正在尝试实现一个非常简单的用例,即一个UI功能,在此情况下:
- 有一个包含一些内容的标签
- 如果点击它,文本输入将替换可用标签的内容
- 用户可以编辑内容
- 按下回车键后,输入将隐藏,标记将重新显示并带有更新的内容
最终,我可以正确地完成所有操作(事实上使用了MongoDB后端、Redux等),但是我唯一无法做到的事情(花费了一整天时间在Google和阅读类似的帖子中)是这样的:
当我的文本输入框出现时,我无法将焦点转移到它上!首先我试过这种方式:
<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.word._id} className="form-control"
ref="updateTheWord"
defaultValue={this.state.word}
onChange={this.handleChange}
onKeyPress={this.handleSubmit}
autoFocus={this.state.toggleWordEdit}/></div>
<div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
<h3 onClick={this.updateWord}>
{this.state.word}</h3>
</div>
但是自动对焦(autoFocus)确实没有起作用 (我“猜测”是因为表单被渲染但处于隐藏状态,使自动对焦无效)。
接下来,我尝试了在我的this.updateWor中使用谷歌和S.O.F.上找到的许多建议:
this.refs.updateTheWord.focus();
还有其他类似的建议都没起作用。我还试图愚弄React,看看我能否做点什么!我使用了真实的DOM:
const x = document.getElementById(this.props.word._id);
x.focus();
而且它也不起作用。有一件事情,我甚至无法理解如何用言语表达建议,比如这样一个: 把ref作为方法(我“猜测”) 我甚至没试过,因为我有多个这样的组件,我需要ref进一步获取每个组件的值,而如果我的ref没有命名,我想象不出我该如何获取值!
所以您能否给我一个想法,帮助我理解,在我不使用表格(因为我需要一个单独的输入框来替换标签)的情况下,当它的CSS(Bootstrap)类失去“hidden”时,我该如何设置它的焦点?