• react 随笔3


    1、ref的3种使用方式

      1)字符串的方式

      2)回调函数(推荐)

      3)React.createRef()  (react16.3新提供的方式)

    1、字符串的方式
    class DOM extends React.Component{
        constructor(props){
            super(props);
            this.myRef = React.creatRef()    //React.creatRef()方法
        }
    
        func = () =>{
            //console.log(this.refs.demoInput.value)   //字符串的方法
            //console.log(this.textInput.value)     //回调函数的方法
            console.log(this.myRef.current.value)  //React.creatRef()方法
        }
    
        render(){
             return (
                 <div>
                       {/*字符串的方法
                       <input type="text" ref = "demoInput" pleceholder="请输入"/>
                       <button onClick={this.func}>点击</button>*}
                       {/*回调函数的方法
                       <input type="text" ref = {(inp)=>{this.textInput = inp}} pleceholder="请输入"/>
                       <button onClick={this.func}>点击</button>*}
                       {/*React.creatRef()方法*}
                       <input type="text" ref = {this.myRef} pleceholder="请输入"/> <button onClick={this.func}>点击</button> 
    </div> ) } }

     2、create react app

      1)在vscode中输入rcc快速生成架子

      2)引用图片

        2.1直接放在public文件夹下则可直接引用

        2.2如下图2种方式

       3)兄弟组件之间的传值

          

        

      

  • 相关阅读:
    confluence的安装、破解和汉化
    Linux学习经验集锦
    MFS 分布式文件系统
    MFS
    Docker 搭建 WordPress
    ansible入门
    docker搭建pxc集群与haproxy负载均衡
    mysql-proxy 实现读写分离
    Linux内核学习总结
    lab8:理解进程调度时机跟踪分析进程调度与进程切换的过程
  • 原文地址:https://www.cnblogs.com/zhengyulu/p/12879177.html
Copyright © 2020-2023  润新知