React——02——三大属性

野生小米椒

已于 2025-03-28 15:48:17 修改

阅读量284

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript

于 2021-01-12 20:51:22 首次发布

本文链接：https://blog.youkuaiyun.com/x1037490413/article/details/112524301

React 专栏收录该内容

42 篇文章

订阅专栏

本文围绕React展开，介绍了使用React开发者调试工具进行调试的方法。详细讲解了编写组件，包括函数式组件和类式组件。还阐述了类式组件实例的三大核心属性，如state借助构造器初始化状态、props的传递与限制、refs的不同使用方式及事件处理等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：使用React开发者调试工具调试

在谷歌应用商店安装这个插件在这里插入图片描述只有用React写得网页，图标才有颜色，打包过后是正常颜色，我现在是红色的
控制台会出现这两个选项卡，Components是记录网页有哪些组件的，Pofiler分析性能

二：编写组件

1.函数式组件

1.React解析组件标签，找到了Demo组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      // 创建函数组件
      function MyComponent() {
        console.log(this);//undefined  普通文件函数中this指向window，这里却指向undefined为什么呢？
        //因为babel翻译完代码后会开启严格模式，禁止自定义的函数（MyComponent）的this指向window
        return <h2>我是函数组件</h2>;
        //并没有调用函数 MyComponent() 为什么能打印，因为React内部自己会调用
      }
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
    </script>
  </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script  type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
        // 创建函数时组件 组件名首字母大写
        function Demo(){
        console.log(this)//此处的this是undefined,因为babel编译后开启了严格模式
          // 函数必须有返回值
          return <h2>函数定义的组件（适用于【简单组件】的定义）</h2>
        }
        //渲染组件到页面 不能把函数直接往页面上放，要写标签的形式，而且标签必须闭合
        ReactDOM.render(<Demo/>,document.getElementById("test"))
/*
执行了ReactDOM.render(<Demo/>...之后，发生了什么？
1.React解析组件标签，找到了Demo组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中
*/
    </script>
 
  </body>
</html>

2.类式组件

类的基本知识
构造器中的this, const p1=new…。new的是谁this指向的就是谁，第一个this指向的是p1,第二个指向p2
在这里插入图片描述继承类里加上一个方法，也就是重写从父类继承过来的方法，会先找到自己定义的方法，如果没定义会从原型链上找到父类定义的方法

1.类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
3.类中所定义的方法，都是放在了类的原型对象上，供实例去使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script  type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
       //1.创建类式组件  必须继承React内置的一个类
       class MyComponent extends React.Component{
        render(){
          //render是放在哪里的？————MyComponent的原型对象上，供实例使用
          //render中的this是谁？————MyComponent的实例对象<=> MyComponent组件实例对象
          console.log(this);
          return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
        }
       }
      //  渲染组件到页面
      ReactDOM.render(<MyComponent/>,document.getElementById('test'))
      /*
        执行了ReactDOM.render....之后，发生了什么？
          1.React解析组件标签，找到了MyComponent组件
          2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法
          3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中
      */
    </script>
 
  </body>
</html>

简单组件和复杂组件区别：
简单组件：无状态
复杂组件：有状态state 也是数据

三：组件实例(类式组件)的三大核心属性

函数组件有props属性，其他属性是没有的
hooks可以让函数组件有这些属性

1.state 借助构造器初始化状态

state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
组件被称为状态机，通过更新组件的state来更新对应的页面显示（重新渲染组件）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script  type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Weather extends React.Component{
        constructor(props){
          super(props)
          this.state={isHot:false}
        }
        render(){
          console.log(this);
          const {isHot}=this.state
          return <h1>今天天气很{isHot? '炎热':'凉爽'}</h1>
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Weather/>,document.getElementById('test'))
    </script>
 
  </body>
</html>

1.1：事件绑定

类中方法的this指向
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Weather extends React.Component {
        constructor(props) {
        //构造函数调用几次？ 1次
        console.log('constructor')
          super(props);
          //初始化状态
          this.state = { isHot: false };
          //构造器里的this是weather的实例对象 改变this指向
          this.demo=this.demo.bind(this) 
        }
        render() {
        //render调用几次？ 1+n次，1是初始化的那次，n是状态更新的次数
        console.log('render')
          //读取状态  render里的this是组件实例对象
          const { isHot } = this.state;
          return <h1 onClick={this.demo}>今天天气很{isHot ? "炎热" : "凉爽"}</h1>;
        }
        demo() {
        //demo调用几次？ 点几次调几次
        console/log('demo')
          //类里面的函数没有function ,直接写函数名
          //demo放在那里————Weather的原型对象上
          //由于demo作为onClick的回调，所以不是通过实例调用的,是直接调用，
          //类中的方法默认开启了局部的严格模式，所以demo中的this为undefined
          console.log("标题被点击了");
          console.log(this)
          //获取原来的isHot值
          const isHot=this.state.isHot
          //状态只能通过setState进行更新
          this.setState({isHot:!isHot})
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

state的简写方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Weather extends React.Component {
        //初始化状态
        state={isHot:false,wind:'大风'}
        render() {
          const { isHot,wind } = this.state;
          return <h1 onClick={this.demo}>今天天气很{isHot ? "炎热" : "凉爽"},{wind}</h1>;
        }
        // 自定义方法————要用赋值语句的形式+箭头函数
        demo=()=>{
          //箭头函数 demo没有this,就会去找其父级（也就是Weather）的this
         const isHot=this.state.isHot
         this.setState({isHot:!isHot})
         console.log(this);
        }
      }
      //渲染组件到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

2.props

组件标签的所有属性都保存在props中
props是只读的
每个组件对象都会有 props(properties 的简写)属性，组件标签的所有属性都保存在 props 中
作用:
通过标签属性从组件外向组件内传递变化的数据
注意:组件内部不要修改 props 数据

2.1批量传递props

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log(this);
          const { name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>年龄：{age}</li>
              <li>性别：{sex}</li>
            </ul>
          );
        }
      }
      //渲染组件到页面
      ReactDOM.render(
        <Person name="11" age="11" sex="man" />,
        document.getElementById("test1")
      );
      ReactDOM.render(
        <Person name="2" age="1" sex="woman" />,
        document.getElementById("test2")
      );

      const p = { name: "老王", age: 18, sex: "男" };
      ReactDOM.render(
        <Person {...p} />,
        document.getElementById("test3")
      );
    </script>
  </body>
</html>

2.2props进行限制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>



    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Person extends React.Component {
        render() {
          console.log(this);
          const { name, age, sex } = this.props;
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>年龄：{age+1}</li>
              <li>性别：{sex}</li>
            </ul>
          );
        }
      }
      // 限制props  对标签属性进行类型，必要性的限制
      Person.propTypes={
        name:PropTypes.string.isRequired,
        sex:PropTypes.string,
        age:PropTypes.number,
        speak:PropTypes.func
      }
            //指定默认标签属性值
      Person.defaultProps={
        sex:"女",
        age:18
      }
      //渲染组件到页面
      ReactDOM.render(
        <Person name="小王"  speak={speak}/>,
        document.getElementById("test1")
      );
      ReactDOM.render(
        <Person name="2" age={19} sex="woman" />,
        document.getElementById("test2")
      );

      const p = { name: "老王", age: 18, sex: "男" };
      ReactDOM.render(
        <Person {...p} />,
        document.getElementById("test3")
      );
      function speak(){
      console.log('人可以说话')
      }
    </script>
  </body>
</html>

2.3简写props

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Person extends React.Component {
        constructor(props){
          super(props)
          console.log(props)
        }
        // 限制props  对标签属性进行类型，必要性的限制
        //静态属性
        static propTypes = {
          name: PropTypes.string.isRequired,
          sex: PropTypes.string,
          age: PropTypes.number,
          speak: PropTypes.func,
        };
        //指定默认标签属性值
        static defaultProps = {
          sex: "女",
          age: 18,
        };
        render() {
          // console.log(this);
          const { name, age, sex } = this.props;
          //this.props.name="jack"这行代码会报错，代表props是只读的
          return (
            <ul>
              <li>姓名：{name}</li>
              <li>年龄：{age + 1}</li>
              <li>性别：{sex}</li>
            </ul>
          );
        }
      }

      //渲染组件到页面
      ReactDOM.render(
        <Person name="小王" speak={speak} />,
        document.getElementById("test1")
      );
      ReactDOM.render(
        <Person name="2" age={19} sex="woman" />,
        document.getElementById("test2")
      );

      const p = { name: "老王", age: 18, sex: "男" };
      ReactDOM.render(<Person {...p} />, document.getElementById("test3"));
      function speak() {
        console.log("人可以说话");
      }
    </script>
  </body>
</html>

2.4函数式组件使用props

函数是没有this的，所以像其他属性是不能用的，但是它可以用props,因为函数可以传参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 引入prop-types 用于对组件标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      function Person(props) {
        const { name, age, sex } = props;
        return (
          <ul>
            <li>姓名：{name}</li>
            <li>性别：{sex}</li>
            <li>年龄：{age}</li>
          </ul>
        );
      }
      //函数没有static关键字 只能写在外面
      Person.propTypes = {
        name: PropTypes.string.isRequired,
        sex: PropTypes.string,
        age: PropTypes.number,
      };
      Person.defaultProps = {
        sex: "女",
        age: 18,
      };

      //渲染组件到页面
      ReactDOM.render(
        <Person name="hi" />,
        document.getElementById("test1")
      );
    </script>
  </body>
</html>

3.refs

在 React 中，不能直接操作 DOM，但是可以通过 ref 来获取对 DOM 元素的引用。例如，在一个表单组件中，你可能想要获取某个输入框的值或者让某个输入框获取焦点，就可以使用 ref 来实现。

3.1字符串形式ref（旧版）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
     <div id="test"><div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Demo extends React.Component{
         showData=()=>{
          //  console.log(this)
           const{input1}=this.refs;
           alert(input1.value)
         }
         showData2=()=>{
           const{input2}=this.refs;
           alert(input2.value)
         }
        render(){
          return(
            <div>
             <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
              <input onBlur={this.showData2} ref="input2" type="text" placeholder="失去焦点提示数据"/>
            </div>
          )
        }
      }
      ReactDOM.render(<Demo />,document.getElementById('test'))
    </script>
  </body>
</html>

不太建议使用字符串形式的,效率低下

3.2回调函数形式的ref

回调函数：定义了，自己没调用，但是执行了
在这里React会帮我们调用这个回调函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
     <div id="test"><div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Demo extends React.Component{
         showData=()=>{
          //  console.log(this)
          //不再是从refs上取值了,而是实例自身上取
           const{input1}=this
           alert(input1.value)
         }
         showData2=()=>{
           const{input2}=this
           alert(input2.value)
         }
        render(){
          return(
            <div>
            {/* 这个c参数正好是ref当前所在的节点 <input ref={c=>console.log(c)} type="text" placeholder="点击按钮提示数据" />*/}&nbsp;
             {/* 箭头函数里面没有this，会在外面找，也就是render的this（组件实例对象） 把这个节点放在组件实例自身上，并且取名为input1  */}
             <input ref={c=>this.input1=c} type="text" placeholder="点击按钮提示数据" />&nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
              <input ref={c=>this.input2=c} onBlur={this.showData2}  type="text" placeholder="失去焦点提示数据"/>
            </div>
          )
        }
      }
      ReactDOM.render(<Demo />,document.getElementById('test'))
    </script>
  </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>

    <script src="../js/react.development.js "></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            state = { isHot: false }
            changeWeather = () => {
                // console.log(this, 'this');
                const { isHot } = this.state
                this.setState({ isHot: !isHot })
            }
            showData = () => {
                const { leftInput } = this
                alert(leftInput.value)
            }
            render() {
                return (<div><input ref={(c) => {
                    // 第一次打印一次  后续若更新(state的变化)它会被执行两次 第一次传入参数null
                    this.leftInput = c; console.log(c, "@")
                }} type="text" placeholder="点击按钮提示数据" />
                    <button onClick={this.showData}>点击按钮提示数据</button>
                    <h1 onClick={this.changeWeather}>今天天气真{this.state.isHot ? '炎热' : '凉爽'}</h1>
                </div>)
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>

我们可以定义成class的绑定函数的方式:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>

    <script src="../js/react.development.js "></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <!-- 对标签属性进行限制 -->
    <script src="../js/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            state = { isHot: false }
            changeWeather = () => {
                // console.log(this, 'this');
                const { isHot } = this.state
                this.setState({ isHot: !isHot })
            }
            showData = () => {
                const { leftInput } = this
                alert(leftInput.value)
            }
            saveInput = (c) => {
                this.leftInput = c
                console.log(c, "@")
            }
            render() {
                return (<div><input ref={this.saveInput
                } type="text" placeholder="点击按钮提示数据" />
                    <button onClick={this.showData}>点击按钮提示数据</button>
                    <h1 onClick={this.changeWeather}>今天天气真{this.state.isHot ? '炎热' : '凉爽'}</h1>
                </div>)
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>

3.3creactRef的使用

在这里插入图片描述一个容器只能有一个节点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
     <div id="test"><div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Demo extends React.Component{
        myRef=React.createRef()
        myRef2=React.createRef()
         showData=()=>{
          //console.log(this.myRef);
          alert(this.myRef.current.value)
         }
         showData2=()=>{
            //console.log(this.myRef);
          alert(this.myRef2.current.value)
         }
        render(){
          return(
            <div>
              <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
              <input ref={this.myRef2} onBlur={this.showData2}  type="text" placeholder="失去焦点提示数据"/>
            </div>
          )
        }
      }
      ReactDOM.render(<Demo />,document.getElementById('test'))
    </script>
  </body>
</html>

3.4react中的事件处理

在这里插入图片描述省略ref的写法:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
     <div id="test"><div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      class Demo extends React.Component{
        myRef=React.createRef()
        myRef2=React.createRef()
         showData=()=>{
          //console.log(this.myRef);
          alert(this.myRef.current.value)
         }
         showData2=(event)=>{
            //console.log(this.myRef);
          alert(event.target.value)
         }
        render(){
          return(
            <div>
              {/*第一个ref不可以省略，因为this.showData是绑定在Button身上的，拿到的是button的事件源*/}
              <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
              <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
              <input onBlur={this.showData2}  type="text" placeholder="失去焦点提示数据"/>
            </div>
          )
        }
      }
      ReactDOM.render(<Demo />,document.getElementById('test'))
    </script>
  </body>
</html>