использовать ref для программного запуска события щелчка?

Question

У меня есть 2 кнопки, я думаю, что могу запустить событие click через ref.

const Button = ({ ref }) => (
  <button onClick={() => alert("btn 2 clicked")} ref={ref}>
    btn 2
  </button>
);
export default function App() {
  const btnRef = useRef(null);
  return (
    <div className="App">
      <button
        onClick={() => {
          btnRef && btnRef.current && btnRef.current.click();
        }}
      >
        btn 1
      </button>
      <br />
      <br />
      <Button ref={btnRef} />
    </div>
  );
}

, но это не работает, чего мне здесь не хватает? https://codesandbox.io/s/async-silence-ns9mg?file= / src / App. js: 62-502

Answer 1

Вам необходимо использовать React.forwardRef()

const Button = React.forwardRef((props, ref) => (
  <button onClick={() => alert("btn 2 clicked")} ref={ref}>
    btn 2
  </button>
));

Пример: https://codesandbox.io/s/affectionate-tdd-5znpf