MENU


Accessing DOM Node


RESETRUNFULL
<!DOCTYPE html><html><head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head><body>
    <div></div>
    <script type="text/babel">
      function TextInputWithFocusButton() {
        const inputEl = React.useRef(null);   // initialized to null
        const onButtonClick = () => {
          inputEl.current.focus();
        };
        return (<div><input ref={inputEl} type="text" />
          <button onClick={onButtonClick}>Focus the input</button>
        </div>);}
      const root = ReactDOM.createRoot(document.querySelector("div"));
      root.render(<TextInputWithFocusButton/>);
    </script>
  </body></html>