React之回调ref中回调执行次数的问题

<!DOCTYPE html>

<html>

<head>

<title>3_回调ref中回调执行次数的问题</title>

</head>

<body>

//1.创建组件

class Demo extends React.Component{

state = {isHot:true}

showInfo = ()=>{

const {input1} = this

alert(input1.value)

}

changeWeather = ()=>{

//获取原来的状态

const {isHot} = this.state

//更新状态

this.setState({isHot:!isHot})

}

saveInput = (c) =>{

this.input1 = c;

console.log('@', c);

}

render(){

const {isHot} = this.state

return(

<div>

<h2>今天天气很{isHot ? '炎热' : '冰爽'}</h2>

{/* jsx注释如下 */}

{/*<input ref={(c)=>{this.input1=c;console.log('@',c);}} type="text"></input><br/>*/}

<button onClick={this.showInfo}>点我提示输入的数据</button>

<button onClick={this.changeWeather}>点我切换天气</button>

</div>

)

}

//2.渲染组件到页面

ReactDOM.render(<Demo/>,document.getElementById("test"));

</script>

</body>

</html>

=================

类联掉调2次（ <input ref={(c)=>{this.input1=c;console.log('@',c);}} type="text"></input><br/>）；第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。

===

绑定函数不会

React之回调ref中回调执行次数的问题相关推荐

reactjs组件实例三大属性之refs使用示例：字符串形式的ref、回调函数形式的ref、回调ref中回调执行次数的问题
1_字符串形式的ref <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
【Promise】入门-同步回调-异步回调-JS中的异常error处理-Promis的理解和使用-基本使用-链式调用-七个关键问题
文章目录 1. 预备知识 1.1 实例对象与函数对象 1.2 两种类型的回调函数 1. 同步回调 2. 异步回调 1.3 JS中的异常error处理 1. 错误的类型 2. 错误处理(捕获与抛出) 3 ...
【Android 高性能音频】AAudio 音频流 PCM 采样的采样缓冲播放的连续机制 ( 数据回调机制 | 数据回调函数指针 | 实现数据回调函数 | 设置数据回调函数 )
文章目录 I . AAudio 音频流采样缓冲播放的连续机制 II . AAudio 音频流数据回调函数函数指针类型定义 III . AAudio 音频流数据回调函数实现 IV . A ...
spring返回数据使用ajax,【spring 后台跳转前台】使用ajax访问的后台，后台正常执行，返回数据，但是不能进入前台的ajax回调函数中...
问题1: 使用ajax访问的后台,后台正常执行,并且正常返回数据,但是不能进入前台的ajax回调函数中问题展示: 问题解决: 最后发现是因为后台的方法并未加注解:@ResponseBody,导致方法 ...
java 自定义函数的调用_Java/Android中的函数调用回调函数自定义回调函数
在做Android自定义控件时遇到要自定义回调函数的问题,想想自己还暂时没有那么精深的技术,赶紧返过头回来再重新研究Java中回调函数的问题.然而不幸的是,网上太多杂乱的帖子和博客都是转来转去,而且都 ...
JavaScript 回调函数中的 return false 问题
今天一个同事问了我一个问题,就是在 Ajax 方法中,请求成功后(success)的回调函数中根据响应的值来判断程序是否继续执行,他不解的是在回调函数中已经 return false 了,但是 Aja ...
Java代码块回调,QueueEvent - 队列化执行线程和代码块
QueueEvent 队列化执行线程和代码块函数说明 1.主要有两个子类,QueueEventThread用来顺序执行线程,QueueEventCode用来顺序执行代码 2.可以使用setSpeed ...
Python 3.X 调用多线程C模块，并在C模块中回调python函数的示例
由于最近在做一个C++面向Python的API封装项目,因此需要用到C扩展Python的相关知识.在此进行简要的总结. 此篇示例分为三部分.第一部分展示了如何用C在Windows中进行多线程编程:第二 ...
html js 回调函数,js中回调函数的学习笔记
回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" ...

React之回调ref中回调执行次数的问题

React之回调ref中回调执行次数的问题相关推荐

最新文章

热门文章