reactjs - 如何使用 React ref 聚焦和选择复选框？

Question

我一直在寻找一种在 React 代码中正确聚焦 和选择 复选框的方法。我在下面的示例中使用的方法 focus() 和 select() 不起作用:

import React, { useRef } from "react";

export const HelloWorld = () => {
  const checkboxref = useRef(null);

  const handleOnClick = () => {
    checkboxref.current.focus();
    checkboxref.current.select();
  };

  return (
    <div>
      <button onClick={handleOnClick}>Focus</button>
      <input type="checkbox" ref={checkboxref} />
    </div>
  );
};

当我点击按钮时，我的复选框没有聚焦也没有被选中...

有什么解决办法吗？

非常感谢。

Answer 1

您不需要创建单独的函数来处理 onChange 事件

const checkboxref = useRef(null);

您可以简单地获取复选框的当前值:

checkboxref.current.checked 
// which returns a boolean