类组件-受控组件
了解什么是受控组件
表单元素的值被React中的state管控,这个表单就是受控的组件
怎么绑定表单元素
如何绑定表单元素,如:input:text
input:checkbox ;value等
import { Component } from 'react';
class App extends Component {
state = {
mobile: '13811112222',
isAgree: true,
};
changeMobile = (e) => {
this.setState({
mobile: e.target.value,
});
};
changeAgree = (e) => {
this.setState({
isAgree: e.target.checked,
});
};
render() {
return (
<>
<div>
<input
value={this.state.mobile}
onChange={this.changeMobile}
type="text"
placeholder="请输入手机号"
/>
</div>
<div>
<input
checked={this.state.isAgree}
onChange={this.changeAgree}
type="checkbox"
/>
同意用户协议和隐私条款
</div>
</>
);
}
}
export default App;
类组件-非受控组件
没有通过 state 控制的表单元素,它自己控制自身的值,就是非受控组件
通过 ref 获取表单元素获取非受控组件的值
import { Component, createRef } from 'react';
class App extends Component {
// 获取非受控组件的值
// 1. 通过createRef创建一个ref对象
// 2. 给元素绑定ref属性值为创建的ref对象
// 3. 通过ref对象的current获取元素,再获取它的值
mobileRef = createRef();
getMobile = () => {
console.log(this.mobileRef.current.value);
};
render() {
return (
<>
<div>
{/* 没有被state控制的表单原生认为是非受控组件 */}
<input ref={this.mobileRef} type="text" placeholder="请输入手机号" />
<button onClick={this.getMobile}>获取</button>
</div>
</>
);
}
}
export default App;