ref 在事件处理程序中没有值

Question

目标功能：
当用户单击按钮时，会显示一个列表。当他在列表外部单击时，它会关闭，按钮应该获得焦点。(遵循辅助功能指南)

我尝试过：

const hideList = () => {
// This closes the list
setListHidden(true);
// This takes a ref, which is forwarded to <Button/>, and focuses it
button.current.focus();
}
<Button
ref={button}
/>

问题：
当我检查hideList函数的范围时，发现ref在单击事件处理程序中的每一个位置都获得了对按钮的正确引用，它{current: null}。
控制台输出：Cannot read property 'focus' of null

示例：
https://codepen.io/moaaz_bs/pen/zQjoLK
- 单击按钮，然后单击外部并查看控制台。

Answer 1

由于您已经在应用程序中使用了钩子，因此您需要进行的唯一更改是使用useRef而不是createRef来生成对列表的引用。

const Button = React.forwardRef((props, ref) => {
return (
<button 
onClick={props.toggleList} 
ref={ref}
>
button
</button>
);
})
const List = (props) => {
const list = React.useRef();
handleClick = (e) => {
const clickIsOutsideList = !list.current.contains(e.target);
console.log(list, clickIsOutsideList);
if (clickIsOutsideList) {
props.hideList();
}
}
React.useEffect(function addClickHandler() {
document.addEventListener('click', handleClick);
}, []);
return (
<ul ref={list}>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
);
}
const App = () => {
const [ListHidden, setListHidden] = React.useState(true);
const button = React.useRef();
const toggleList = () => {
setListHidden(!ListHidden);
}
const hideList = () => {
setListHidden(true);
button.current.focus();
}
return (
<div className="App">
<Button 
toggleList={toggleList} 
ref={button}
/>
{
!ListHidden &&
<List hideList={hideList} />
}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));

工作演示

您需要它的原因是，在功能组件的每个渲染中，如果您使用React.createRef，则会生成一个新的 ref，而useRef实现时，它会在第一次调用时生成一个 ref，并在将来的重新渲染中随时返回相同的引用。

附言一个经验法则，你可以说当你使用useRef希望在功能组件中包含引用，而createRef应在类组件中使用。

Answer 2

创建你的引用

this.button = React.createRef();

将 Ref 添加到您的 DOM 元素

ref={this.button}

根据要求使用 Ref

this.button.current.focus();

使用转发引用完成代码

const Button = React.forwardRef((props, ref) => {
return (
<button
onClick={props.toggleList}
ref={ref}
>
button
</button>
);
})
const List = (props) => {
const list = React.createRef();
handleClick = (e) => {
const clickIsOutsideList = !list.current.contains(e.target);
if (clickIsOutsideList) {
props.hideList();
}
}
React.useEffect(function addClickHandler() {
document.addEventListener('click', handleClick);
return function clearClickHandler() {
document.removeEventListener('click', handleClick);
}
}, []);
return (
<ul ref={list}>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
);
}
const button = React.createRef();
const App = () => {
const [ListHidden, setListHidden] = React.useState(true);
const toggleList = () => {
setListHidden(!ListHidden);
}
const hideList = () => {
setListHidden(true);
console.log(button)
button.current.focus();
}
return (
<div className="App">
<Button
toggleList={toggleList}
ref={button}
/>
{
!ListHidden &&
<List hideList={hideList} />
}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));