码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-02-06 20:54:46      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:specific   react   struct   class   change   stat   date   cal   nts   

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‘)
);

 

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

标签:specific   react   struct   class   change   stat   date   cal   nts   

原文地址:http://www.cnblogs.com/Answer1215/p/6371626.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!