什么是 React的refs?为什么它们很重要?

冒牌SEO React 155

refs允许你直接访问DOM元素或组件实例。为了使用它们,可以向组件添加个ref属性。

如果该属性的值是一个回调函数,它将接受底层的DOM元素或组件的已挂载实例作为其第一个参数。可以在组件中存储它。

export class App extends Component  {
showResult ( ) {
console. log(this. input. value)
}
render ( ) {
return (
<div>
<input  type="text" ref={input => this .input =input } />
< button onClick={this. showResult.bind(this)}>展示结果</ button>
</div>
);
}
}

如果该属性值是一个字符串, React将会在组件实例化对象的refs属性中,存储一个同名属性,该属性是对这个DOM元素的引用。可以通过原生的 DOM API操作它。


export class App extends Component {
 showResult( )
console .log ( this.refs.username.value)
render ( ){
  return (
<div>
<input type="text" ref="username"/>
< button onClick={this. showResu1t.bind (this)}>展示结果</ button>
</div>
);
}
  • 暂无回复内容