React

References

React

References to Components

References inside Components

var PartyComponent = React.render(<PartyComponent />, myContainer);

React

References to Components

React.render returns a reference to the mounted component

React

References to Components

JSX doesn't return a component instance, but a ReactElement

- primary type in React

- created with React.createElement()

Remember that...

React

References to Components

var partyElement = <PartyComponent />; // This is just a ReactElement.


var partyComponentInstance = React.render(partyElement, myContainer);

Should only be used at top level

React

References inside Components

use references via refs

React

References inside Components

Use case

focus an input after update value

React

References inside Components

Use case

focus an input after update value

    <input value={this.state.vodooInput} />

React

References inside Components

Use case

focus an input after update value

    <input value={this.state.vodooInput} onChange={this.handleChange.bind(this)} />

React

References inside Components

Use case

focus an input after update value

    class PartyComponent extends React.Component {
        constructor(){
            super();
            this.state = { vodooInput: '' };
        }
        handleChange(e) {
          this.setState({ vodooInput: this.state.vodooInput });
        }
        clearAndFocusInput() {
          // TODO
        }
        render() {
          return (
            <div>
              <div onClick={this.clearAndFocusInput.bind(this)}>Reset and Focus</div>
              <input value={this.state.vodooInput} onChange={this.handleChange.bind(this)} />
            </div>
          );
        }
    };

React

References inside Components

Use case

focus an input after update value

    class PartyComponent extends React.Component {
        /* ... */
        clearAndFocusInput() {
         // clear
          this.setState({vodooInput: ''});

          //  TODO focus

        },
        render() {
          return (
            <div>
              <div onClick={this.clearAndFocusInput.bind(this)}>Reset and Focus</div>
              <input value={this.state.vodooInput} onChange={this.handleChange.bind(this)} />
            </div>
          );
        }
    };

React

References inside Components

How can we find the input node?

React

References inside Components

How can we find the input node?

Anti-pattern: create a variable to the input element

 
  render() {
    let vodooInput = <input />;
    this.rememberThisInput = vodooInput;
    return (
      <div>
        {vodooInput}
      </div>
    );
  }

This won't work!

React

References inside Components

Solution: ref String attribute

<input value={this.state.vodooInput} ref="vodoo" onChange={this.handleChange.bind(this)} />

accessed by this.refs.vodoo

also works with non-DOM elements (react components)

React

References inside Components

Use case

focus an input after update value

    //focus
    React.findDOMNode(this.refs.vodoo).focus();

React.findDOMNode(component) 

call to get a reference to the component's DOM node

React

References inside Components

    //focus
    React.findDOMNode(this.refs.vodoo).focus();

React.findDOMNode(component) 

call to get a reference to the component's DOM node

Notes

React.getDOMNode(component)  - deprecated

React

References inside Components

    class PartyComponent extends React.Component {
        /* ... */
        clearAndFocusInput() {
         // clear
         this.setState({vodooInput: ''});

         //focus
         React.findDOMNode(this.refs.vodoo).focus();
        }
        render() {
          return (
            <div>
              <div onClick={this.clearAndFocusInput.bind(this)}>Reset and Focus</div>
              <input value={this.state.vodooInput} onChange={this.handleChange.bind(this)} />
            </div>
          );
        }
    };

React

References inside Components

Notes

- refs must be used in cases that are inherently non REACTive

- we must use mainly props and state to our data flow

React

References inside Components

Benefits

- access DOM node

          React.findDOMNode(this.refs.myInput)

- refs are managed by the programmer

React

References inside Components

Cautions

- Do not access refs inside render()

- never access as a property what was specified as a string

         ref="myInput"               this.refs["myInput"]

- think between using state and refs

React

DEMO

React

Let's try this!

{ /* Try References */ }

1. Exercice 

      #13-references