首页 > 代码库 > [React] Use React ref to Get a Reference to Specific Components
[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‘));
[React] Use React ref to Get a Reference to Specific Components
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。