我有一个带有文本输入的 React (15.3.2) 组件。
(我在这里说“渲染”的所有地方实际上是渲染或取消隐藏;我都试过了。)
当输入元素模糊时,我会渲染一个带有文本输入的新组件。
我想给新的文本输入焦点。
我已经尝试过 componentDidMount
、componentWillUpdate
和 componentDidUpdate
;我试过命名和函数 ref
s;我试过 react-dom。
聚焦本身有效,例如,一旦它被渲染,如果我点击初始输入,焦点就会转到新输入(这是一个错误,但与聚焦相比,微不足道)。
第一个输入有一个 onBlur
,它设置用于告诉第二个输入是否渲染的状态。
在那个模糊处理程序中,我尽可能地停止事件。
当我跳出第一个元素时,我已经“过去”了新呈现的元素,例如,我当前裸设计中的浏览器标签栏——我猜新元素还没有被呈现?
class SecondInput extends Component {
componentDidUpdate = (prevProps, prevState) => {
if (!this.props.hidden) this._input.focus()
}
render = () =>
<input type="text" hidden={this.props.hidden} ref={(c) => this._input = c}
}
class NewItem extends Component {
state = { itemEntered: false }
itemBlurred = (e) => {
e.preventDefault()
e.stopPropagation()
this.setState({ itemEntered: true })
}
render = () =>
<div>
Item: <input type="text" onBlur={this.itemBlurred} />
<SecondInput hidden={!this.state.itemEntered} />
</div>
}
有什么想法或提示吗?我不得不相信这是显而易见的事情,因为这肯定一直在发生。
我也对任何其他形式的组件层次结构持开放态度,例如,如果我需要一个容器以某种方式包装所有这些东西,那很好。
react 15.3.2
最佳答案
您看到的问题似乎是因为当您按 Tab 键时页面上没有更多可聚焦的元素,因此焦点转到了地址栏。出于某种原因,当焦点位于地址栏时,仅调用 this._input.focus()
不会像您预期的那样获取焦点。
为了解决这个问题,我添加了一个空的 div,并根据是否显示第二个输入来设置 tabIndex
属性。
为了让我自己更轻松,我将输入集中在 mount 而不是使用 hidden 属性。这在您的情况下可能有效,也可能无效,但它似乎更清晰,因为如果输入是受控输入,它会阻止输入在每次按键时调用焦点。
let Component = React.Component;
class SecondInput extends Component {
componentDidMount(){
this.textInput.focus()
}
render(){
return (
<input type="text" ref={(input) => this.textInput = input} />
)
}
}
class NewItem extends Component {
state = { itemEntered: false }
itemBlurred = (e) => {
//e.preventDefault()
//e.stopPropagation()
this.setState({ itemEntered: true })
}
render = () =>
<div>
Item: <input type="text" onBlur={this.itemBlurred} />
{
this.state.itemEntered ? [
<SecondInput/>
] : []
}
<div tabIndex={this.state.itemEntered ? null : 0}/>
</div>
}
ReactDOM.render(<NewItem />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
关于javascript - 在 Tab 触发模糊事件后关注新呈现的文本输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40432112/