React(8)-组件ref引用
目录
1.组件form
受控组件及其特点
非受控组件及其特点
模拟：简单受控组件表单
input两个方向绑定数据：
模拟：复杂(真实)受控组件表单(form里面有多种数据输入)
注意：handleChange1~5 中代码重复率高。
降低代码重复写法降低代码重复写法
模拟：非受控组件
受控组件形式自动时钟
非受控组件形式自动时钟
2.ref-函数类型实现
3.createRef实现
createRef实现自动化时钟
2.业务场景(登录)=>ref模拟form表单收集
三种非受控表单解决方式
方式一：ref="key" 原理:this.refs={} => this.refs={key:真实DOM}
方式二：ref={e=>this.key=e} =>直接赋值this.key=真实DOM
方式三：直接调用react提供的方法createRef();this.key=React.createRef()
事件绑定受控表单方式
3.业务衍生场景=>按钮触发事件
4.业务衍生场景=>表单自动获取焦点
1.组件form
受控组件及其特点
组件受状态和属性变化控制,称为受控组件。
特点：数据驱动，组件不直接操作DOM，而是由ReactDOM自动同步
非受控组件及其特点
组件不受状态和属性变化控制,称为非受控组件。
特点：可以直接操作DOM,类似于传统的html表单操作,通过ref获取真实DOM。
模拟：简单受控组件表单
(数据传递) =>数据源state+属性绑定value+事件监听onChange
class App extends React.Component{
state = {name:"",age:18}
handleClick = () ={
console.log("form data:",this.state)
}
handleChange = (e) ={
console.log(e.target.value) //获取到input输入内容
this.setState({
name:e.target.value
})
}
input两个方向绑定数据：
1.通过value，同步state=>input (属性绑定)
2.通过onChange，同步input输入输入内容=>state (事件绑定)
render(){
return(
name:
//受控组件收集表单
value = {this.state.name} // input属性绑定
onChange={this.handleCHange}> //input事件绑定
)
}
}
ReactDOM.render(
,document.getElementById("app"))
模拟：复杂(真实)受控组件表单(form里面有多种数据输入)
class App extends React.Component{
state = {
name:"user",
age:18,
single:false,
desc:"intoduction",
hobby:"playing"
}
handleSubmit=()={
//获取收集表单数据
console.log("form data:",this.state)
//提交数据
//阻止默认行为
e.preventDefault()
}
handleChange1 = (e) ={
this.setState({
name:e.target.value
})
}
handleChange2 = (e) ={
this.setState({
age:e.target.value
})
}
handleChange3 = (e) ={
console.log(e.target.checked) //点击,在true和false之间来回切换
//将表单中内容同步到数据中
this.setState({
single:e.target.checked
})
}
handleChange4 = (e) ={
this.setState({
desc.target.value
})
}
handleChange5 = (e) ={
this.setState({
hobby:e.target.value
})
}
render(){
return(