前端猛男的博客基础知识-受控组件与非受控组件
表单中的受控组件与非受控组件
可以把input 理解为是一个组件是 react封装的一个组件 通过
ref属性拿到的数据是非受控的通过state状态 双向绑定的 是受控的
简单理解为: 被state状态所操控的组件 叫做
受控组件没有被state状态操控的组件 叫做非受控组件广泛说法为： React组件的数据渲染是否被调用者传递的
props完全控制， 控制则为受控组件 否则非受控组件
1. 非受控组件
通过
ref属性获取值 非受控组件虽然可以使用defaultValue设置默认值 但是value属性是写死绑定的 无法更改 且无法传递子组件数据 视图数据还不会更新
import React, { Component } from 'react'
import ReactDom from 'react-dom';
class App extends Component {
MyInput = React.createRef()
render() {
return (
<div>
<input ref={this.MyInput} type="text" value='1111' defaultValue='默认值' />
<button onClick={() => {
console.log(this.MyInput.current.value)
}}>确认</button>
<button onClick={() => {
this.MyInput.current.value = ''
}}>重置</button>
<Child value={this.MyInput.current}></Child>
</div>
)
}
}
const Child = (props) => {
console.log(props.value)
return <div>我是子组件child 接收到值：{ props.value}</div>
}
ReactDom.render(<App/>,document.getElementById('root'))2. 受控组件
基于
state状态让react来处理的组件 数据双向绑定 属于受控组件
通过
state状态给value绑定状态值 利用onChange事件和setState方法去修改状态里面的值 ,从而达到双向数据绑定 是被React状态所控制的 所以叫受控组件也可以传递子组件数据 触发组件render()函数更新
import React, { Component } from 'react'
import ReactDom from 'react-dom';
class App extends Component {
state = {
InputValue:'默认值'
}
render() {
return (
<div>
{/* 在react里面 onChange跟onInput 事件的效果是一样的 */}
{/* 利用onChange事件 把输入框里面的值赋值给状态 状态接受到之后 在重新赋值给input组件 */}
<input value={this.state.InputValue} onChange={(event) => {
this.setState({
InputValue:event.target.value
})
}}></input>
<button onClick={() => {
console.log(this.state.InputValue)
}}>确认</button>
<button onClick={() => {
this.setState({
InputValue:''
})
}}>重置</button>
<Child value={this.state.InputValue}></Child>
</div>
)
}
}
const Child = (props) => {
console.log(props.value)
return <div>我是子组件child 接收到值：{ props.value}</div>
}
ReactDom.render(<App/>,document.getElementById('root'))注意
在React input组件中 onChange事件 跟 onIpunt事件 的效果是一样的