React的受控组件和非受控组件介绍_学全栈的灌汤包_react 受控组件和非受控组件

网络 02-07 2424

文章目录 React受控和非受控组件认识受控组件受控组件演练认识非受控组件(了解)

React受控和非受控组件认识受控组件

在React中，HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state。

比如下面的HTML表单元素:

这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面;

在React中，并没有禁止这个行为，它依然是有效的;

但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据;

实现这种效果的标准方式是使用“受控组件”;

export class App extends PureComponent { constructor() { super() this.state = { username: "" } } handleSubmitClick(event) { // 1.阻止默认行为, 防止提交页面刷新 event.preventDefault() // 2.获取到表单的数据 console.log(this.state.username) // 3.之后就可以发送网络请求提交到服务器 } changeUsername(event) { this.setState({ username: event.target.value }) } render() { const { username } = this.state return ( <div> <form onSubmit={e => this.handleSubmitClick(e)}> <label htmlFor="username"> 用户: <input type="text" name="" id="username" value={username} onChange={e => this.changeUsername(e)} /> </label> <button type='submit'>提交按钮</button> </form> </div> ) } }

受控组件演练

input文本框

在 HTML 中，表单元素(如<input>、 <textarea> 和 <select>)之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态(mutable state)通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们将两者结合起来，使React的state成为“唯一数据源”;

渲染表单的 React 组件还控制着用户输入过程中表单发生的操作;

被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”;

由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.inputValue，这使得 React 的 state 成为唯一数据源。

由于 inputChange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。

export class App extends PureComponent { constructor() { super() this.state = { inputValue: "abcd" } } inputChange(event) { this.setState({ inputValue: event.target.value }) } render() { const { inputValue } = this.state return ( <div> <input type="text" value={inputValue} onChange={e => this.inputChange(e)}/> </div> ) } }

checkbox标签

texteare标签和input比较相似:

export class App extends PureComponent { constructor() { super() this.state = { isAgree: false } } handleSubmitClick(event) { // 1.阻止默认行为, 防止提交页面刷新 event.preventDefault() // 2.获取到表单的数据 console.log(this.state.isAgree) // 3.之后就可以发送网络请求提交到服务器 } inputChange(event) { this.setState({ isAgree: event.target.checked }) } render() { const { isAgree } = this.state return ( <div> <form onSubmit={e => this.handleSubmitClick(e)}> <label htmlFor="agree"> {/* 复选框绑定checked */} <input id="agree" type="checkbox" checked={isAgree} onChange={e => this.inputChange(e)} /> 同意协议 </label> <div> <button type='submit'>提交按钮</button> </div> </form> </div> ) } }

select标签

select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中。

export class App extends PureComponent { constructor() { super() this.state = { fruit: "apple" } } handleSubmitClick(event) { // 1.阻止默认行为, 防止提交页面刷新 event.preventDefault() // 2.获取到表单的数据 console.log(this.state.fruit) // 3.之后就可以发送网络请求提交到服务器 } changeSelect(event) { this.setState({ fruit: event.target.value }) } render() { const { fruit } = this.state return ( <div> <form onSubmit={e => this.handleSubmitClick(e)}> <select value={fruit} onChange={e => this.changeSelect(e)}> <option value="apple">苹果</option> <option value="orgin">橙子</option> <option value="banana">香蕉</option> </select> <div> <button type='submit'>提交按钮</button> </div> </form> </div> ) } } 认识非受控组件(了解)

React推荐大多数情况下使用受控组件来处理表单数据:

一个受控组件中，表单数据是由 React 组件来管理的

另一种替代方案是使用非受控组件，这时表单数据将交由DOM节点来处理;

如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。

我们来进行一个简单的演练:

使用ref来获取input元素;

在非受控组件中通常使用defaultValue来设置默认值;

同样，<input type=“checkbox”> 和 <input type=“radio”> 支持 defaultChecked，<select> 和 <textarea> 支持 defaultValue。

export class App extends PureComponent { constructor() { super() this.state = { name: "chenyq" } this.nameRef = createRef() } handleSubmitClick(event) { // 1.阻止默认行为, 防止提交页面刷新 event.preventDefault() // 2.非受控组件获取值 console.log(this.nameRef.current.value) // 3.之后就可以发送网络请求提交到服务器 } componentDidMount() { // 再通过原生的方式监听变化, 不建议, 非受控组件还是在操作DOM // this.nameRef.current.addEventListener } render() { const { name } = this.state return ( <div> <input type="text" defaultValue={name} ref={this.nameRef} /> <div> <button type='submit'>提交按钮</button> </div> </form> </div> ) } }