SHARE
TWEET

Untitled

a guest Oct 14th, 2019 86 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // EmailInput wraps an HTML `input` and adds some app-specific styling.
  2. const EmailInput = React.forwardRef((props, ref) => (
  3.   <input ref={ref} {...props} type="email" className="AppEmailInput" />
  4. ));
  5.  
  6. class App extends Component {
  7.   emailRef = React.createRef();
  8.  
  9.   render() {
  10.     return (
  11.       <div>
  12.         <EmailInput ref={this.emailRef} />
  13.         <button onClick={() => this.onClickButton()}>
  14.           Click me to focus email
  15.         </button>
  16.       </div>
  17.     );
  18.   }
  19.  
  20.   // `this.emailRef.current` points to the `input` component inside of EmailInput,
  21.   // because EmailInput is forwarding its ref via the `React.forwardRef` callback.
  22.   onClickButton() {
  23.     this.emailRef.current.focus();
  24.   }
  25. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top