受控与非受控组件
基本概念
- 没有
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;