ref基本使用
推荐使用方法二 :传入对象
ref的类型
上面我们ref对映的都是html对象,也可以应用在自己定义的类组件上,函数组件不可以,函数组件就是一个函数,没有实例
我们拿到了类组件对象,可以调用他的方法
受控组件
受控组件一般值html的表单,react里没有vue中v-model相关指令,所以受控组件和v-model效果差不多,就是自己控制表单的提交,input输入框的值保存在state中,同步更新
import React, { PureComponent } from 'react'
export default class App extends PureComponent {
constructor(props){
super(props)
/* 使react的state成为唯一数据源 */
this.state = {
username :''
}
}
render() {
/* 渲染表单的react组件还控制着用户输入过程中表单发生的变化 */
return (
<div>
<form onSubmit={e=>this.handleSubmit(e)}>
<label htmlFor="input">
用户:
<input type="text" id="input" onChange={e=>{this.handleChange(e)}} value={this.state.username}></input>
</label>
<input type="submit"></input>
</form>
</div>
)
}
handleSubmit(e) {
/* 阻止默认事件 */
e.preventDefault()
}
handleChange(e) {
this.setState({
username:e.target.value
},()=>{
/* 因为setstate是异步的,可以在第二个参数回调函数里获取更新后的值 */
console.log(this.state.username);
})
}
}
非受控组件(不推荐)
使用dom节点保存value
import React, { PureComponent,createRef } from 'react'
export default class App extends PureComponent {
constructor(props){
super(props)
this.inputRef = createRef()
}
render() {
return (
<div>
{/* 表单数据交给dom节点来管理 */}
<form onSubmit={e=>this.handleSubmit(e)}>
<label htmlFor="input">
用户:
<input type="text" id="input" ref={this.inputRef}></input>
</label>
<input type="submit"></input>
</form>
</div>
)
}
handleSubmit(e) {
e.preventDefault()
/* 直接操作dom元素 没有使用react的state管理 */
console.log(this.inputRef.current.value);
}
}