[React] Use React ref to Get a Reference to Specific Components

When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref. This lesson will introduce us to some of the nuances when using ref.

 

<input
          ref="b"
          type="text"
          onChange={this.update.bind(this)}
          />

The way to refer to the 'ref':

this.refs.b.value

 

Also 'ref' is able to receive a callback function:

<Input
          ref={ component => this.a = component}
          update={this.update.bind(this)}
        />


class Input extends React.Component {
  render(){
    return <div><input ref="input" type="text" onChange={this.props.update}/></div>
  }
}

Now the way to access the ref value:

this.a.refs.input.value,

---

 

class App extends React.Component {
  constructor(){
    super();
    this.state = {a: '', b: ''}
  }
  update(){
    this.setState({
      a: this.a.refs.input.value,
      b: this.refs.b.value
    })
  }
  render(){
    return (
      <div>
        <Input
          ref={ component => this.a = component}
          update={this.update.bind(this)}
        /> {this.state.a}
        <hr />
        <input
          ref="b"
          type="text"
          onChange={this.update.bind(this)}
          /> {this.state.b}
      </div>
    )
  }
}

class Input extends React.Component {
  render(){
    return <div><input ref="input" type="text" onChange={this.props.update}/></div>
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);