react中受控组件与非受控组件都是针对表单的,受控组件就是,通过state获取值的组件,在react中另外一种直接通过ref获取值得组件就是非受控组件。
代码如下
受控组件
表单元素是可输入的,也就是有自己的可变状态
React中可变状态通常保存在state中,并且只能通过setState() 方法来修改
state与表单元素值value绑定在一起,有state的值来控制表单元素的值
class App extends React.Component {
constructor(){
super()
this.inputChange = this.inputChange.bind(this)
}
state = {
txt : ''
}
inputChange(e){
this.setState({
txt: e.target.value
})
}
render(){
console.log(this.state);
return (
<div>
{/* 把state的值设置给输入框的value,绑定change事件,这样用户在输入内容的时候调用相应函数,在函数里面把当前设置的值赋值给state,从而达到数据的统一 */}
<input type="text" value={this.state.txt} onChange={this.inputChange}/>
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'))
非受控组件
调用 React.createRef() 方法创建ref对象
将创建好的 ref 对象添加到文本框中
通过ref对象获取到文本框的值
非受控组件: 表单组件没有value prop就可以称为非受控组件
class App extends React.Component {
constructor(){
super()
//创建 ref
this.txtRef = React.createRef()
}
// 获取文本框的值
getTxt =() => {
console.log(this.txtRef.current.value)
}
render(){
return (
<div>
<input type ="text" ref={this.txtRef} />
<button onClick ={this.getTxt}>获取值</button>
</div>
)
}
}
本文理解自:https://blog.csdn.net/qq_45690359/article/details/107190345