React学习笔记-04.React面向组件编程

大_怨种
99 阅读1分钟

01-基本理解和使用

1-1.函数式组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>
  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      function MyComponent(params) {
        console.log(this); // undefined ---> 是因为 babel 编译后是严格模式,那么this就不能指向window了,
        return <h2>我是用函数定义的组件(适用于简单组件的定义)</h2>;
      }
      // 2. 渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
      /**
       * 执行了 ReactDOM.render(<MyComponent />, document.getElementById("test"));
       * 1. React会解析组件标签,找MyComponent组件
       * 2. 发现组件是函数定义的,那么就调用这个函数,
       * 3. 将返回的虚拟dom转换成真实dom.呈现在页面上
       */
    </script>
  </body>
</html>

1-2.类式组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>
  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 类式组件
      class MyComponent extends React.Component {
        render() {
          // render 方法放在了--->类 MyComponent 的原型对象上; 供实例使用
          // render 的this是谁 ---> MyComponent 的实例对象
          console.log(this); // MyComponent {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
          return <h1>我是类定义的组件,适用于复杂组件</h1>;
        }
      }
      // 2. 渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
      /**
       * 执行了 ReactDOM.render(<MyComponent />, document.getElementById("test"));
       * 1. React会解析组件标签,找MyComponent组件
       * 2. 发现组件是函数定义的,那么就new出来该类的实例,并通过该实例调用到原型的render方法,
       * 3. 将返回的虚拟dom转换成真实dom.呈现在页面上
       */
    </script>
  </body>
</html>

02-state

2-1.state 基础使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建组件
      class Weather extends React.Component {
        // constructor 构造器执行几次?-->new 几次就会执行几次
        constructor(props) {
          super(props);
          // 初始化状态
          this.state = {
            isHot: true,
            wind: "微风",
          };
          // 这样处理是为了解决静态方法内无法拿到类的this,解决this指向的问题
          this.changeWeather = this.changeWeather.bind(this);
        }
        /**
         * changeWeather放在哪里?---Watcher的原型对象上,供实例使用
         * 由于changeWeather方法作为onClick的回调,所以不是实例调用的而是直接调用的
         * 类中的方法默认开启了严格模式,所以changeWeather里面的this是undefined
         *
         */
        //  changeWeather 执行几次?--->点几次调用几次
        changeWeather() {
          const isHot = this.state.isHot;
          // state里面的状态里面的数据要修改需要使用 setState 方法
          // this.state.isHot = !isHot   // 错误的写法
          this.setState({
            isHot: !isHot,
          });
        }
        // render 执行几次?--> 执行 n+1 次, n 是状态更新的次数,每次 state 更新, render 都会执行
        render() {
          // 读取状态
          const { isHot, wind } = this.state;
          return (
            <div>
              <button onClick={this.changeWeather}>改变天气</button>
              <h1>
                今天的天气好: {isHot ? "热" : "冷"},{wind}
              </h1>
            </div>
          );
        }
      }
      // 2. 渲染组件到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

2-2.state 简写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      class Weather extends React.Component {
        // 初始化状态
        state = { isHot: true, wind: "微风" };

        /**
         * 自定义方法:---以后都成 赋值语句的形式+箭头函数
         * this执行就会到了watcher了
         * 这样的写法就是把 changeWeather 放在自身,而不是放在原型函数上
         */
        changeWeather = () => {
          console.log(this); // Weather {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}
          const isHot = this.state.isHot;
          this.setState({ isHot: !isHot });
        };
        render() {
          const { isHot, wind } = this.state;
          return (
            <div>
              <h1 onClick={this.changeWeather}>
                今天的天气好: {isHot ? "热" : "冷"},{wind}
              </h1>
            </div>
          );
        }
      }
      // 2. 渲染组件到页面
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>

03-props

3-1.props 基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        render() {
          return (
            <ul>
              <li>姓名{this.props.name}</li>
              <li>年龄{this.props.age}</li>
              <li>性别{this.props.sex}</li>
            </ul>
          );
        }
      }
      // 2. 渲染组件到页面
      ReactDOM.render(
        <MyComponent name="tom" age="12" sex="男" />,
        document.getElementById("test")
      );
    </script>
  </body>
</html>

3-2.对 props 进行限制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../React-js/prop-types.js"></script>

    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        // props是只读的
        render() {
          return (
            <ul>
              <li>姓名{this.props.name}</li>
              <li>年龄{this.props.age}</li>
              <li>性别{this.props.sex}</li>
            </ul>
          );
        }
      }
      // 对标签属性进行必要性的限制
      MyComponent.propTypes = {
        name: PropTypes.string.isRequired, // 限制姓名为字符串且必填
        name: PropTypes.string, // 限制必须字符串
        age: PropTypes.number, // 限制必须数字
        speak: PropTypes.func, // 限制必须为函数
      };
      // 指定属性的默认值
      MyComponent.defaultProps = {
        sex: "不男不女",
        age: 18,
      };
      const info = { name: "123", age: 13 };
      ReactDOM.render(
        <MyComponent {...info} speak={speak} />,
        document.getElementById("test1")
      );
      function speak(params) {
        console.log("我说话了");
      }
    </script>
  </body>
</html>

3-3.props 简写

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../React-js/prop-types.js"></script>

    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        // 对标签属性进行必要性的限制
        static propTypes = {
          name: PropTypes.string.isRequired, // 限制姓名为字符串且必填
          name: PropTypes.string, // 限制必须字符串
          age: PropTypes.number, // 限制必须数字
          speak: PropTypes.func, // 限制必须为函数
        };
        // 指定属性的默认值
        static defaultProps = {
          sex: "不男不女",
          age: 18,
        };
        // props是只读的
        render() {
          return (
            <ul>
              <li>姓名{this.props.name}</li>
              <li>年龄{this.props.age}</li>
              <li>性别{this.props.sex}</li>
            </ul>
          );
        }
      }

      const info = { name: "123", age: 13 };
      ReactDOM.render(
        <MyComponent {...info} speak={speak} />,
        document.getElementById("test1")
      );
      function speak(params) {
        console.log("我说话了");
      }
    </script>
  </body>
</html>

3-4.props 在构造函数中情况

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../React-js/prop-types.js"></script>

    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        // props是只读的
        render() {
          return (
            <ul>
              <li>姓名{this.props.name}</li>
              <li>年龄{this.props.age}</li>
              <li>性别{this.props.sex}</li>
            </ul>
          );
        }
      }
      const info = { name: "123", age: 13 };
      ReactDOM.render(
        <MyComponent {...info} speak={speak} />,
        document.getElementById("test1")
      );
      function speak(params) {
        console.log("我说话了");
      }
    </script>
  </body>
</html>

3-5.props 在函数值组件中使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 引入prop-types,用于对组件标签属性进行限制 -->
    <script src="../React-js/prop-types.js"></script>

    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      function MyComponent(props) {
        const { name, age, sex } = props;
        return (
          <ul>
            <li>姓名{name}</li>
            <li>年龄{age}</li>
            <li>性别{sex}</li>
          </ul>
        );
      }
      // 对标签属性进行必要性的限制
      MyComponent.propTypes = {
        name: PropTypes.string.isRequired, // 限制姓名为字符串且必填
        name: PropTypes.string, // 限制必须字符串
        age: PropTypes.number, // 限制必须数字
        speak: PropTypes.func, // 限制必须为函数
      };
      // 指定属性的默认值
      MyComponent.defaultProps = {
        sex: "不男不女",
        age: 18,
      };
      const info = { name: "123", age: 13 };
      ReactDOM.render(
        <MyComponent {...info} />,
        document.getElementById("test1")
      );
    </script>
  </body>
</html>

04-refs

4.1-字符串形式 refs 的基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      /**
       * 字符串的refs存在效率上的问题,不推荐使用
       */
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        // 展示左侧输入框的数据
        showData = () => {
          const { input1 } = this.refs;
          let value1 = input1.value;
          console.log(value1);
        };
        // 展示右侧输入框的数据
        showData2 = () => {
          const { input2 } = this.refs;
          let value2 = input2.value;
          console.log(value2);
        };
        render() {
          return (
            <div>
              <input
                ref="input1"
                type="text"
                placeholder="点击按钮提示数据"
              ></input>
              <button onClick={this.showData}>点我提示左侧的数据</button>
              <input
                ref="input2"
                onBlur={this.showData2}
                type="text"
                placeholder="失去焦点提示数据"
              ></input>
            </div>
          );
        }
      }
      // 2.渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test1"));
    </script>
  </body>
</html>

4.2-回调形式 refs 的基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      /**
       * 字符串的refs存在效率上的问题,不推荐使用
       */
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        // 展示左侧输入框的数据
        showData = () => {
          const { input1 } = this;
          let value1 = input1.value;
          alert(value1);
        };
        // 展示右侧输入框的数据
        showData2 = () => {
          const { input2 } = this;
          let value2 = input2.value;
          alert(value2);
        };
        render() {
          return (
            <div>
              <input
                ref={(c) => (this.input1 = c)}
                type="text"
                placeholder="点击按钮提示数据"
              ></input>
              <button onClick={this.showData}>点我提示左侧的数据</button>
              <input
                ref={(c) => (this.input2 = c)}
                onBlur={this.showData2}
                type="text"
                placeholder="失去焦点提示数据"
              ></input>
            </div>
          );
        }
      }
      // 2.渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test1"));
    </script>
  </body>
</html>

4.3-回调形式 refs 的回调执行次数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      /**
       * 字符串的refs存在效率上的问题,不推荐使用
       */
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        state = { isHot: true };
        // 展示左侧输入框的数据
        showData = () => {
          const { input1 } = this;
          let value1 = input1.value;
          alert(value1);
        };
        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>
              {/*这种写法有个问题,就是更新时候,这个console.log(c)会执行两次,第一次c是null,第二才是这个dom结构*/}
              {/*<input ref={c => { this.input1 = c; console.log(c); }} type="text" placeholder="点击按钮提示数据"></input>*/}

              {/*这种写法是做好的,只会执行一次,但是没必要*/}
              <input
                ref={this.saveInput}
                type="text"
                placeholder="点击按钮提示数据"
              ></input>
              <button onClick={this.showData}>点我提示左侧的数据</button>
              <button onClick={this.changeWeather}>点我切换天气</button>
            </div>
          );
        }
      }
      // 2.渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test1"));
    </script>
  </body>
</html>

4.4-createRef 形式 refs 的基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        /**
         * React.createRef调用后返回䘝容器,该容器可以存储被ref所标识的节点
         * 该容器是专人专用,只能存一个节点
         */
        myRef1 = React.createRef();
        myRef2 = React.createRef();
        // 展示左侧输入框的数据
        showData = () => {
          alert(this.myRef1.current.value);
        };
        // 展示右侧输入框的数据
        showData2 = () => {
          alert(this.myRef2.current.value);
        };
        render() {
          return (
            <div>
              <input
                ref={this.myRef1}
                type="text"
                placeholder="点击按钮提示数据"
              ></input>
              <button onClick={this.showData}>点我提示左侧的数据</button>
              <input
                ref={this.myRef2}
                onBlur={this.showData2}
                type="text"
                placeholder="失去焦点提示数据"
              ></input>
            </div>
          );
        }
      }
      // 2.渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test1"));
    </script>
  </body>
</html>

4.5-.事件处理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>01-函数式组件</title>
  </head>

  <body>
    <!-- 准备好容器 -->
    <div id="test"></div>
    <div id="test1"></div>
    <!-- 引入React核心库. -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入React-dom,用于支持操作DOM -->
    <script src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script src="../React-js/babel.min.js"></script>
    <!-- 写这个type的意义是为了让他知道我写的是jsx -->
    <script type="text/babel">
      // 1. 创建函数式组件
      class MyComponent extends React.Component {
        /**
         * 1. 通过 onXxx 属性指定事件处理函数(注意大小写)
         *   1.1 React 使用的是自定义(合成)事件,而不是使用的原生DOM的事件 --- 为了更好的兼容性
         *   1.2 React 中的事件是通过事件委托方式处理的(委托给组件的最外层) --- 为了高效
         * 2. 通过 event.target 得到发生事件的 DOM 元素 --- 不要过度使用 ref
         */

        //创建ref容器
        myRef1 = React.createRef();
        // 展示左侧输入框的数据
        showData = () => {
          alert(this.myRef1.current.value);
        };
        // 展示右侧输入框的数据
        showData2 = (event) => {
          alert(event.target.value);
        };
        render() {
          return (
            <div>
              <input
                ref={this.myRef1}
                type="text"
                placeholder="点击按钮提示数据"
              ></input>
              <button onClick={this.showData}>点我提示左侧的数据</button>
              <input
                onBlur={this.showData2}
                type="text"
                placeholder="失去焦点提示数据"
              ></input>
            </div>
          );
        }
      }
      // 2.渲染组件到页面
      ReactDOM.render(<MyComponent />, document.getElementById("test1"));
    </script>
  </body>
</html>
avatar
文章
阅读
粉丝