react受控组件与非受控组件

react受控组件与非受控组件区别在于：

受控组件中输入框的值由其change事件接管，做对应的数据劫持操作，例如可以对输入框的值进行合法输入校验（匹配正则），此时表单数据由 React 组件来管理（“受开发者控制”）。
步骤：
a.创建一个state值绑定在输入框的value上；
b.输入框绑定change事件传入事件e；
c.change事件中得到输入框的值然后赋值改变state值；
d.数据组装提交到后台；

import axios from "axios";
import React, { useState, useEffect } from "react";function ControlledComponent() {const [userName, setUsername] = useState("小明");function doSumbit() {const data = {name: userName,};console.log(data)axios("xxx", data);}useEffect(() => {console.log(userName);}, [userName]);return (<><input value={userName} onChange={(e) => {setUsername(e.target.value);} }></input><button onClick={doSumbit}>提交</button></>);
}
export default ControlledComponent;

非受控组件则是同过ref直接获取输入框的值，只获取到最后状态的结果值，在输入过程中做不到对输入值的操作，此时表单数据将交由 DOM 节点来处理（“不受开发者控制”）。
步骤：
a.创建一个ref实例绑定到输入框的ref上；
b.通过ref.current.value获取输入框的值进行数据组装提交到后台；

import axios from "axios";
import React, { useRef } from "react";function NotControlledComponent() {const inputRef = useRef();function doSumbit() {const data = {name: inputRef.current.value,};console.log(data);axios("xxx", data);}return (<><input ref={inputRef}></input><button onClick={doSumbit}>提交</button></>);
}
export default NotControlledComponent;

注：本文使用的react hooks 写的例子，详情参考官网：在大多数情况下，我们推荐使用受控组件来处理表单数据

react受控组件与非受控组件相关推荐

[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
React的受控组件和非受控组件
一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只 ...
【React】知识点归纳：受控组件与非受控组件区别
React: 受控组件与非受控组件区别受控组件示范代码: 原理图: 非受控组件示范代码: 结论受控组件在HTML中,标签<input>.<textarea>.< ...
什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
React 的受控组件和非受控组件有什么不同
大家好,我是前端西瓜哥,今天我们来看看 React 的受控组件和非受控组件有什么不同. 受控组件受控组件,指的是将表单元素的值交给组件的 state 来保存. 例子: import './style ...
react——非受控组件和非受控组件的应用
非受控组件和非受控组件的应用什么是非受控组件: 非受控组件:它应用的次数没有受控组件多,在工作中,多数使用为受控组件非受控组件:表单项中的value或checked值,它不受state中的属性控制 ...

react受控组件与非受控组件

react受控组件与非受控组件相关推荐

最新文章

热门文章