React 学习笔记受控与非受控组件
基本概念#
- 没有
state的组件叫做无状态组件，，有state的组件叫做有状态组件 - 区分受控与非受控是看组件中的数据是否是由父组件的
props控制的，如果完全是由父组件的props来控制的，则是受控组件，否则就是非受控组件相关案例#
非受控表单组件#
- 以下的代码，如果只是单独使用的话，则没有什么问题，但是，如果要将
input输入框的值传递到其他的组件中之类的，则不行，如下面代码中的Child组件一样，当input输入框的值发生改变之后，Child中的值并不会随之改变，因为render函数并没有执行，而render函数执行的条件则是重新执行了setState函数，所以如果想要传递给其他地方用的话，则需要使用状态state, 即受控组件.
import React, {Component, createRef} from 'react';
class App extends Component {
usernameRef = createRef()
login = () => {
console.log(this.usernameRef.current.value);
}
onReset = () => {
this.usernameRef.current.value = ''
}
render() {
return (
<div>
<input ref={this.usernameRef} type="text" defaultValue='xiaoming'/>
<button onClick={this.login}>登录</button>
<button onClick={this.onReset}>重置</button>
{/*<Child username={this.usernameRef.current.value}></Child>*/}
</div>
);
}
}
export default App;
受控表单组件#
import React, {Component, createRef} from 'react';
class App extends Component {
state = {
username: ''
}
getInputValue = (event) => {
this.setState({
username: event.target.value
})
}
login = () => {
console.log(this.state.username);
}
onReset = () => {
this.setState({
username: ''
})
}
render() {
return (
<div>
{/*此时 onChange 和 onInput 的效果是一样的, 每输入一个内容都会监听到, 但是原生 js 中则不是, 原生中 onChange 是监听失去焦点后的事件, onInput 是监听键盘输入的事件*/}
<input type="text" value={this.state.username} onChange={this.getInputValue}/>
<button onClick={this.login}>登录</button>
<button onClick={this.onReset}>重置</button>
</div>
);
}
}
export default App;
关于 LearnKu
粤公网安备 44030502004330号