React重置非受控组件state的方法
如果想通过props来重置state的值。有3种方法:
1. 最好的方法:key属性
修改key属性的值,可以使组件卸载后重新加载。所有的状态全部重置。
这种情况可以给key设一个每次渲染都会改变的值。
而且在多层嵌套的情况下,避免了组件的diff。
(递归实现树状级联组件,且节点带有状态时,每次都需要重置状态state)
2. 比较特殊属性:getDerivedStateFromProps
在getDerivedStateFromProps周期中,比较props.id的值,来更新state
3. 通过ref调用实例
class App extends React.Component {
constructor(props) {
super(props);
this.ref = React.createRef();
}
componnetDidMount() {
// this.ref.current指向子组件的实例对象this
this.ref.current.resetData()
}
render() {
// 只能是类子组件
return <Child ref={this.ref}>
}
} class Child extends React.Component {
resetData = () => {
// TODO
}
render() {
return <div></div>
}
}
React重置非受控组件state的方法的更多相关文章
- 浅谈React受控与非受控组件
背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...
- 学习React系列(四)——受控组件与非受控组件
受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...
- React:受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...
- 浅谈react受控组件与非受控组件
引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...
- React受控组件和非受控组件
受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...
- 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法
生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...
- React文档(十七)非受控组件
大多数情况下,我们建议使用受控组件(也就是用React的state来控制表单元素的value值)来实现表单.在一个受控组件里,表单数据被React组件处理.另一种方案就是非控制组件,这样的话表单数据就 ...
- React 受控组件和非受控组件
需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event. ...
- react 表单(受控组件和非受控组件)
我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...
随机推荐
- VNC的使用
1. 安装 rpm -ivh tigervnc-server--.el6.x86_64.rpm 如果rpm安装时发现有依赖,建议直接使用yum安装,轻松解决依赖问题: yum install tige ...
- MySQL8.0新特性总览
1.消除了buffer pool mutex (Percona的贡献) 2.数据字典全部采用InnoDB引擎存储,支持DDL原子性.crash safe.metadata管理更完善(可以利用ibd2s ...
- Go 关于 kafka 的生产者、消费者实例
zookeeper + kafka 首先要在 apche 官网下载 kafka 的程序包(linux版本),然后放到服务器上解压,得到以下目录 bin 目录下包含了服务的启动脚本 启动 zookeep ...
- windows下oracle数据库报错ORA-12705解决方法
转自:http://blog.sina.com.cn/s/blog_16eaf6b940102x66q.html 有个朋友,他们那边windows虚拟机重启后,数据库不能起来报错ORA-12705无法 ...
- [LeetCode] 1029. 两地调度 ☆(贪心)
官方题解 作差排序 描述 公司计划面试 2N 人.第 i 人飞往 A 市的费用为 costs[i][0],飞往 B 市的费用为 costs[i][1]. 返回将每个人都飞到某座城市的最低费用,要求每个 ...
- MySQL常见interview
mysql支持的存储引擎,以及各自区别 常用的有myisam,innodb,bdb myisam是mysql默认存储引擎:不支持事务和外键,访问速度快,对事物完整性没有要求或者以select.inse ...
- Python函数Day1
一.函数的初识 函数的定义:函数最主要的目的是封装一个功能,一个函数就是一个功能 定义函数的格式: def 函数名(): 函数体 def my_len(): count = 0 s1 = 'hahah ...
- jmeter+jenkins 配置过程(很详细)
一.安装jmeter 第一步 安装JDK,配置JDK路径.注:jdk下载地址,推荐使用jdk1.8版本 http://www.oracle.com/technetwork/java/javase/d ...
- VSCode安装程序——java开发
文章:微软为 Java 开发者推出 VSCode 安装程序 文章介绍微软为VSCode提供了开发程序,方便java开发者更好的使用VSCode
- Codeforces Round #525 (Div. 2) D. Ehab and another another xor problem(交互题 异或)
题目 题意: 0≤a,b<2^30, 最多猜62次. 交互题,题目设定好a,b的值,要你去猜.要你通过输入 c d : 如果 a^c < b^d ,会反馈 -1 : 如果 a^c = b^ ...