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)控制的,这个组件的行 ...
随机推荐
- jquery中filter()和find()函数区别
通常把这两个函数,filter()函数和find()函数称为筛选器. 下面的例子分别使用filter函数和find函数对一组列表进行筛选操作. 一组列表: <li>1</li> ...
- C++11<functional>深度剖析:背景、原理、接口与实现
自C++11以来,C++标准每3年修订一次.C++14/17都可以说是更完整的C++11:即将到来的C++20也已经特性完整了. C++11已经有好几年了,它的年龄比我接触C++的时间要长10倍不止吧 ...
- 4_PHP流程控制语句_2_循环结构
以下为学习孔祥盛主编的<PHP编程基础与实例教程>(第二版)所做的笔记. PHP流程控制共有3种类型:条件控制结构.循环结构以及程序跳转和终止语句. 4.2 循环结构 4.2.1 whil ...
- python 内置函数和匿名函数
内置函数 截止到python版本3.6.2,现在python一共为我们提供了68个内置函数. Built-in Functions abs() dict() help() min() ...
- 基于【 MySql 】二 || mysql详细学习笔记
mysql重点学习笔记 /* Windows服务 */ -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysql ...
- css 垂直方向 margin 边距 重合
1:控制两个相邻边盒子之间的距离,在A或者B盒子上用margin控制,就可以控制距离了. 2:父子级之间的元素,常规文档流中,只要垂直外边距直接接触就会发生合并.比如在写header标签时,想移动he ...
- 两通道实信号使用一个FFT同时计算算法
前言 在工程的实际应用场景中,往往是需要最省资源量.而DSP资源和BRAM资源对FPGA来说弥足珍贵. 对于同时存在多个通道的实信号需要做FFT而言,常规做法是每个通道用一个FFT IP,FFT IP ...
- Story of Jerry Wang's Wechat subscription account
As an SAP Techinical Ambassador,Jerry is always willing to share his SAP expertise to various social ...
- IO模型之BIO代码详解及其优化演进
一.BIO简介 BIO是java1.4之前唯一的IO逻辑,在客户端通过socket向服务端传输数据,服务端监听端口.由于传统IO读数据的时候如果数据没有传达,IO会一直等待输入传入,所以当有请求过来的 ...
- 异常-Phoenix HBASE Last region should end with an empty key. You need to create a new region and regioninfo in HDFS to plug the hole
1 详细异常信息 RROR: There is a hole in the region chain between \x03\x00\x00\x00\x00\x00\x00\x00\x00 and ...