React之回调函数形式的ref

<!DOCTYPE html>

<html>

<head>

<title>2_回调函数形式的ref</title>

</head>

<body>

//1.创建组件

class Demo extends React.Component{

//展示左侧输入框的数据

showData = ()=>{

const {input1}=this

alert(input1.value)

}

//展示右侧输入框的数据

showData2 = () => {

const { input2 } = this

alert(input2.value)

}

render(){

return(

<div>

<input ref={c =>this.input1=c} type="text" pacleholder="点击按钮提示数据"/> 

<button onClick={this.showData}>点我提示左侧的数据</button> 

<input onBlur={this.showData2} ref={c => this.input2 = c} type="text" pacleholder="失去焦点提示数据" /> 

</div>

)

}

//2.渲染组件到页面

ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById("test"));

</script>

</body>

</html>

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

失去焦点时弹出：

React之回调函数形式的ref相关推荐

reactjs组件实例三大属性之refs使用示例：字符串形式的ref、回调函数形式的ref、回调ref中回调执行次数的问题
1_字符串形式的ref <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
reactjs回调函数形式的ref：含内联形式回调函数调用次数问题
reactjs回调函数形式的ref:含内联形式回调函数调用次数问题
【C语言指针】回调函数、冒泡函数模拟实现qsort、指针和数组笔试题解析
目录一.回调函数定义: 用回调函数形式实现加法运算二.qsort 函数参数: void指针用qsort排序整型和结构体用冒泡函数模拟实现qsort,排序整型和结构体三.指针和数组笔试题解析 ...
react回调函数_React中的回调中自动绑定ES6类函数
在使用ES6类的React组件时,您必须遇到这种现象,必须显式绑定类函数,然后将其传递给诸如onClick.例如,采用以下示例. import React from 'react';class MyC ...
React生命周期函数-生命周期回调函数
面试的时候问到了如何运用,这里再回顾一下. 也叫生命周期钩子函数(生命周期钩子) 生命周期大概分成三个阶段:初始化阶段,更新阶段,卸载将组件放入页面的过程中,React会在合适的时间进行函数的调用. ...
Javascript第四章定义函数的形式、回调函数第五课
两者的区别: 第一种方法:函数声明在编写时可以先调用,再声明: 第二种方法:函数表达式必须先定义,再调用更多免费教学文章请关注这里函数的回调主要的理解: 当用户用的时候,不是直接触发的状态,当他 ...
从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
从 0 到 1 实现 React 系列 —— 4.优化setState和ref的实现
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
回调函数自定义传参_10分钟教你手写8个常用的自定义hooks
作者言写在文章开头的话 Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性.本文是一篇以实战为主的文章,主要讲解实际 ...

React之回调函数形式的ref

React之回调函数形式的ref相关推荐

最新文章

热门文章