首页 > 其他分享 >ref用法(获取元素节点)

ref用法(获取元素节点)

时间:2023-04-24 21:56:52浏览次数:35  
标签:console log 输入框 用法 React 获取 add ref 节点

import React from 'react'


export default class App extends React.Component {

    myref=React.createRef()

    render() {
        return (
            
            <div>
                {/* 获取输入框的内容 写法一 */}
                <input ref="mytext"></input>
                  <button onClick={
                    ()=>{
                        console.log(this.refs.mytext.value)   
                    }
                }>add 匿名函数触发</button>


                {/* 获取输入框的内容 写法二 */}
                <input ref={this.myref}></input>
                  <button onClick={
                    ()=>{
                        console.log(this.myref.current.value)   
                    }
                }>add 匿名函数触发</button>
            </div>
        )
    }
}

 

标签:console,log,输入框,用法,React,获取,add,ref,节点
From: https://www.cnblogs.com/kaibindirver/p/17351055.html

相关文章

  • 使用Ref还是Reactive?
    我喜欢Vue3的CompositionAPI,它提供了两种方法来为Vue组件添加响应式状态:ref和reactive。当你使用ref时到处使用.value是很麻烦的,但当你用reactive创建的响应式对象进行重构时,也很容易丢失响应性。在这篇文章中,我将阐释你如何来选择reactive以及ref。一句话总结:默认情况下使用......
  • 带修改树上随机游走到叶节点期望得分
    太菜了,搞了一下午才搞懂。。题意:一棵有\(n\)个节点的树,每个点都有一个权值\(a_i\)。从\(1\)号点开始,每次等概率随机移动到一个相邻节点\(i\),并获得\(a_i\)的得分。(可以重复获得,起点权值也计算)有\(q\)次修改,每次修改一个点的权值。在一开始和每次修改后,求出移动到叶......
  • 【c&c++】C++ 关于编译出现“undefined reference to `std::cout‘“的问题
    1、问题概述        在使用gcc编译c++代码时会出现undefinedreferenceto`std::cout',如编译如下代码:#include<iostream>usingnamespacestd;intmain(){cout<<"Helloworld!";return0;}然而,gcc下编译出现的问题是: 2、解决方法使用g++编译,g++......
  • @Valid 和 @Validated 注解用法详解
     目录案例引入@Valid详解@Validated详解@Valid和@Validated比较  案例引入下面我们以新增一个员工为功能切入点,以常规写法为背景,慢慢烘托出@Valid和@Validated注解用法详解。那么,首先,我们会有一个员工对象Employee,如下:/***员工对象**@authors......
  • 动力节点老杜Vue框架教程【一】Vue程序初体验
    Vue.js是一个渐进式MVVM框架,目前被广泛使用,也成为前端中最火爆的框架Vue可以按照实际需要逐步进阶使用更多特性,也是前端的必备技能动力节点老杜的Vue2+3全家桶教程已经上线咯!学习地址:https://www.bilibili.com/video/BV17h41137i4/视频将从Vue2开始讲解,一步一个案例,知识点......
  • k8s 能做到限制pod在节点的指定cpu核心上运行吗?用--cpuset 方式实现,请给出一个具体案
    在Kubernetes中,可以使用--cpuset方式来限制Pod在节点的指定CPU核心上运行。这可以通过在Pod的yaml文件中设置容器启动命令来实现。具体地,我们可以在容器的启动命令中使用--cpuset选项来指定需要运行的CPU核心。下面是一个典型的使用--cpuset选项的Pod的yaml文件示例:apiVersion:......
  • springboot集成redis时总报错Connection refused: no further information: localhost
    nacos上配置的关于redis的key值不是springboot需要的固定写法如:sping.redis.host=spring.redis.port=sping.redis.password=spring.redis.database=我写的是一个自定义的key如com.dream.redis.host改为springboot认识的即可其他和springboot集成的组件类似,切记......
  • java中排序的正确用法
    publicclassTest{publicstaticvoidmain(String[]args){sort();}publicstaticvoidsort(){List<Integer>list=newArrayList();//降序hitRule.sort((o1,o2)->o2.compareTo(o1));//升序......
  • 设置隐藏节点和不可投票节点
    配置隐藏节点复制集中隐藏节点不能变成主,但是可以参加选举。隐藏节点,最常用的场景是延迟复制。如果不想某个节点变成主节点,将priority设置成0即可如果设置了settings.chainingAllowed,支持辅助节点从另外的复制节点做数据同步,mongodb默认是优先讯在非隐藏节点来做数据同步。如果......
  • Koordinator 一周年,新版本 v1.2.0 支持节点资源预留,兼容社区重调度策略
    作者:佑祎、吕风背景Koordinator是一个开源项目,基于阿里巴巴在容器调度领域多年累积的经验孵化诞生,可以提升容器性能,降低集群资源成本。通过混部、资源画像、调度优化等技术能力,能够提高延迟敏感的工作负载和批处理作业的运行效率和可靠性,优化集群资源使用效率。从2022年4......