标签: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