React中的受控组件和非受控组件学习总结

故事：Form表单是前端开发过程中经常使用的功能， 在使用react 表单时，都会遇到受控组件或者非受控组件。当我听到这两个关键词的时候确实有点懵逼，不知道啥意思，因此记录下来，作为自己的学习目标

受控组件(React官方推荐使用受控组件)

在React中，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件

import React, {PureComponent} from "react"

import {PropTypes} from 'prop-types';

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'


export default class Form extends React.Component {

constructor(props) {

super(props)

}

state = {

username:"你我贷"

}

handleChange = (e) => {

let name = e.target.value;

this.setState({

username: name

})

}

render() {

return (

<div>

<div>{this.state.username}</div>

<input type="text" value={this.state.username} onChange={this.handleChange}/>

</div>

)

}

}

 

总结

1. 可以通过在初始state中动态设置value值 

2. 每当表单的值发生变化时，调用onChange事件处理器。如果添加了value （单选框和复选框对应的是checked）而没有添加onChange会受到react警告 

3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。 

4. setState触发视图的重新渲染，完成表单组件值得更新

非受控组件

表现形式上，react中没有添加value属性（单选按钮和复选框对应的是checked）的表单组件元素就是非受控组件

render() {

return (

<div>

<input type="text" />

</div>

)

}

1）非受控组件即不受状态的控制，获取数据就是相当于操作DOM。 

2）非受控组件的好处是很容易和第三方组件结合。

非受控组件获取输入框中的值的两种方法

第一种方式：函数

因为不受控组件的数据来源是 DOM 元素，所以一般情况下不受控组件我们使用ref来获取DOM元素进行操作。即在虚拟DOM节点上使用ref，并使用函数，将函数的参数挂载到实例的属性上

import React, {PureComponent} from "react"

import {PropTypes} from 'prop-types';

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'


export default class Form extends React.Component {

constructor(props) {

super(props)

}

handleSubmit = (e) => {

e.preventDefault();

console.log(this.username)

console.log(this.username.value)


}

render() {

return (

<div>

<input type="text" ref={(node)=> this.username= node} />

<br/><br/>

<button onClick={this.handleSubmit}>click</button>

</div>

)

}

}

第二种方式：通过构造函数声明的方式

react 16.3新语法 

实例的构造函数constructor这创建一个引用 

在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性 

react会自动将输入框中输入的值放在实例的second属性上

import React, {PureComponent} from "react"

import {PropTypes} from 'prop-types';

import {BrowserRouter as Router, Route, Link} from 'react-router-dom'


export default class Form extends React.Component {

constructor(props) {

super(props)

// 在构造函数中创建一个引用

this.username = React.createRef();

}

handleSubmit = (e) => {

e.preventDefault();

console.log(this.username)

console.log(this.username.current)

console.log(this.username.current.value)

}

render() {

return (

<div>

<input type="text" ref={this.username} />

<br/><br/>

<button onClick={this.handleSubmit}>click</button>

</div>

)

}

}

转载于:https://juejin.im/post/5c8f6bed5188252db82a5901