Skip to content

Instantly share code, notes, and snippets.

@d4rkm3z

d4rkm3z/react-forwardref-simple-example.js

Forked from jamesreggio/react-forwardref-simple-example.js
Created April 28, 2020 18:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save d4rkm3z/bed67e1d204af3663389c088e23eff18 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save d4rkm3z/bed67e1d204af3663389c088e23eff18 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @jamesreggio jamesreggio revised this gist Aug 28, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion react-forwardref-simple-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,7 +18,7 @@ class App extends Component {
    }

    // `this.emailRef.current` points to the `input` component inside of EmailInput,
    // because EmailInput is forwarding its ref via its `React.forwardRef` callback.
    // because EmailInput is forwarding its ref via the `React.forwardRef` callback.
    onClickButton() {
    this.emailRef.current.focus();
    }
  2. @jamesreggio jamesreggio revised this gist Aug 27, 2018. 1 changed file with 7 additions and 16 deletions.
    23 changes: 7 additions & 16 deletions react-forwardref-simple-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,33 +1,24 @@
    // EmailInput wraps an HTML `input` and adds some app-specific styling.
    const EmailInput = React.forwardRef((props, ref) => (
    <input
    ref={ref}
    {...props}
    type="email"
    className="AppEmailInput"
    />
    <input ref={ref} {...props} type="email" className="AppEmailInput" />
    ));

    class App extends Component {
    constructor(props) {
    super(props);
    this.emailRef = React.createRef();
    this.onClickButton = this.onClickButton.bind(this);
    }
    emailRef = React.createRef();

    render() {
    return (
    <div>
    <EmailInput ref={this.emailRef} />
    <button onClick={this.onClickButton}>Click me to focus email</button>
    <button onClick={() => this.onClickButton()}>
    Click me to focus email
    </button>
    </div>
    );
    }

    // `this.emailRef.current` points to the `input` component inside of
    // EmailInput (instead of EmailInput itself), because EmailInput is using
    // React.forwardRef to 'forward' its ref onward. This makes it possible for
    // us to call `focus`.
    // `this.emailRef.current` points to the `input` component inside of EmailInput,
    // because EmailInput is forwarding its ref via its `React.forwardRef` callback.
    onClickButton() {
    this.emailRef.current.focus();
    }
  3. @jamesreggio jamesreggio revised this gist Aug 27, 2018. 1 changed file with 16 additions and 8 deletions.
    24 changes: 16 additions & 8 deletions react-forwardref-simple-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,26 +1,34 @@
    // EmailInput wraps an HTML `input` and adds some app-specific styling.
    const EmailInput = React.forwardRef((props, ref) => (
    <input ref={ref} {...props} type="email" className="appEmailInput" />
    <input
    ref={ref}
    {...props}
    type="email"
    className="AppEmailInput"
    />
    ));

    class App extends Component {
    constructor(props) {
    super(props);
    this.emailRef = React.createRef();
    this.onClickButton = this.onClickButton.bind(this);
    }

    render() {
    return (
    <div>
    <EmailInput ref={this.emailRef} />
    <button onPress={() => this.emailRef.current.focus()}>
    Click me to focus email
    </button>
    <button onClick={this.onClickButton}>Click me to focus email</button>
    </div>
    );
    }
    }

    // `this.emailRef.current` points to the `input` component inside of EmailInput
    // (instead of EmailInput itself), because EmailInput is using React.forwardRef
    // to 'forward' its ref onward. This makes it possible to call `focus`.
    // `this.emailRef.current` points to the `input` component inside of
    // EmailInput (instead of EmailInput itself), because EmailInput is using
    // React.forwardRef to 'forward' its ref onward. This makes it possible for
    // us to call `focus`.
    onClickButton() {
    this.emailRef.current.focus();
    }
    }
  4. @jamesreggio jamesreggio created this gist Aug 27, 2018.
    26 changes: 26 additions & 0 deletions react-forwardref-simple-example.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    // EmailInput wraps an HTML `input` and adds some app-specific styling.
    const EmailInput = React.forwardRef((props, ref) => (
    <input ref={ref} {...props} type="email" className="appEmailInput" />
    ));

    class App extends Component {
    constructor(props) {
    super(props);
    this.emailRef = React.createRef();
    }

    render() {
    return (
    <div>
    <EmailInput ref={this.emailRef} />
    <button onPress={() => this.emailRef.current.focus()}>
    Click me to focus email
    </button>
    </div>
    );
    }
    }

    // `this.emailRef.current` points to the `input` component inside of EmailInput
    // (instead of EmailInput itself), because EmailInput is using React.forwardRef
    // to 'forward' its ref onward. This makes it possible to call `focus`.