MENU


Exposing Selected Node Methods

In this example, the value we'll get from the ref will only contain the function blur(). The function itself is also "customized" to behave differently than what you'd normally expect.
RESETRUNFULL
const MyInput = React.forwardRef((props, ref) => {
   const [val, setVal] = React.useState('');
   const inputRef = React.useRef();
   React.useImperativeHandle(ref, () => ({
      blur: () => {
         console.log("blurred");
         inputRef.current.blur();
      }
   }));
   return (<input {...props}
          ref={inputRef}
  val={val}
  onChange={e => setVal(e.target.value)} />);});const App = () => { const ref = React.useRef(null); const onBlur = () => {
  console.log(ref.current); // Only contains one property!
   ref.current.blur(); };
   return <MyInput ref={ref} onBlur={onBlur} />;};ReactDOM.render(<App />, document.querySelector("div"));