Question

我在反应中有以下代码。在ParentComponent中，我根据是否满足某些条件来渲染第一或第二面板。假设FirstPanel被渲染。在FirstPanel内，我能够进行一些交互操作以更新面板，并且我需要将焦点转到第一个面板中的第一个元素（又称第一个div元素）我怎样才能做到这一点？我尝试使用this.props.setRef.focus()，但不起作用。

ParentComponent

setCurrentPanel(panel) {
    this.currentPanel = panel;
}

render() {
    if (this.state.showFirstPanel)
        return <FirstPanel setRef={this.setCurrentPanel} />;
    if (this.state.showSecondPanel)
        return <SecondPanel setRef={this.setCurrentPanel} />;
    return undefined;
}

FirstPanel

componentDidUpdate() {
    // put focus on component FirstPanel again
}
render() {
    return <div role="tabpanel" tabIndex="0" ref={this.props.setRef}>
       {children}
    </div>
}

Answer 1

根据您的ParentComponent实现，当状态更改时，FirstPanel将卸载，然后SecondPanel装载。

再次切换时，SecondPanel卸载，FirstPanel装载。

要实现目标，只需在componentDidUpdate和componentDidMount生命周期中进行焦点操作即可。

此外，如果ParentComponent对currentPanel不起作用，则可以在每个Panel组件中creatRef。目前，您的setRef只是一个函数，而不是包含对dom元素的引用的Ref对象。

Answer 2

使用useRef和useEffect可以做到这一点：

import React , {useRef, useEffect, useState} from 'react';
const MyComponent = () => {
const [valueThatWillChange, setValueWillChange] = useState(null);
const ref = useRef(null);
useEffect(() => {
  ref.current.focus();
}, [valueThatWillChange]);

return (
    <div>
      <input type="text" ref={ref} />
      <input type="text" onBlur={e => setValueThatWillChange(e.target.value)} />
    </div>
  );
};

每次光标从第二个输入移出时，他将返回第一个输入

（反应）在组件更新时如何将重点放在第一个元素上？

2 个答案: