- 第一种ref字符串方式获取Dom节点方式
- 已废弃的原始方法
class Dom extends React.Component{
showInputDom = () =>{
const {userNameInput} = this.refs
console.log(userNameInput);
}
render(){
return (
<div>
<input ref="userNameInput" type="text"/>
<button onClick={this.showInputDom}>点击显示inpuDom</button>
</div>
)
}
}
ReactDOM.render(<Dom/>,document.getElementById('root'))
class Dom extends React.Component{
showInputDom = () =>{
const {userNameInput} = this
console.log(userNameInput);
}
render(){
return (
<div>
{/*注释 (currentNode)=>{this.userNameInput =currentNode} 这里边的currentNode 为 当前的node节点 简称c */}
{/*<input ref={(currentNode)=>{this.userNameInput =currentNode}} type="text"/>*/}
<input ref={(c)=>{this.userNameInput = c}} type="text"/>
<button onClick={this.showInputDom}>点击显示inpuDom</button>
</div>
)
}
}
ReactDOM.render(<Dom/>,document.getElementById('root'))
class Dom extends React.Component{
// 挂载到了自身实例上了
userNameInput= (c) =>{
this.input1 = c ;
console.log(c);
}
render(){
return (
<div>
{/*会在试图更新时调用两次 第一次赋值为null,第二次赋值为dom节点*/}
{/*<input ref={(c)=>{this.userNameInput =c}} type="text"/>*/}
{/*在试图更新时不会调用}
{/*<input ref={ this.userNameInput } type="text"/>*/}
{/*注意这俩个方法是有区别的,这两个对项目的影响可以忽略不记*/}
<input ref={this.userNameInput} type="text"/>
<button onClick={this.showInputDom}>点击显示inpuDom</button>
</div>
)
}
}
ReactDOM.render(<Dom/>,document.getElementById('root'))