5

目标功能：
当用户单击按钮时，会显示一个列表。当他在列表之外单击时，它会关闭并且按钮应该获得焦点。（遵循无障碍指南）

我尝试了什么： 

  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在 click 事件处理程序内部的每个地方都可以正确引用按钮，它是{current: null}.
控制台输出：Cannot read property 'focus' of null

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

4

2 回答 2

8

由于您已经在应用程序中使用了钩子，因此您需要做的唯一更改是使用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.createRefwhileuseRef实现一个新的 ref，它会在第一次调用时生成一个 ref 并在将来的任何时候返回相同的引用重新渲染。

PS一个经验法则，你可以说useRef当你想在功能组件中使用引用时应该使用它，而createRef 应该在类组件中使用它。

于 2019-05-29T05:16:52.757 回答
1

创建你的参考

this.button = React.createRef();

将 Ref 添加到您的 DOM 元素

ref={this.button}

根据要求使用 Ref

this.button.current.focus();

使用 forwarding-refs 完成代码

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'));
于 2019-05-25T15:57:22.280 回答