回调ref中回调执行次数的问题

Tutorial: React基础 Category: React Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0
20_回调ref中回调执行次数的问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>3_回调ref中回调执行次数的问题</title>
  </head>

  <body>
    <!-- 准备好一个"容器" -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>

    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="./js/react-dom.development.js"
    ></script>

    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel">
      // 创建组件
      class Demo extends React.Component {
        state = { isHot: false };

        showInfo = () => {
          const { input1 } = this;
          alert(input1.value);
        };

        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>
              {/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
              {/*这种内联函数的方式, 每次render会执行两次 第一次会清空旧的实例, 返回null, 第二次会创建新的实例*/}
              {/*@ null*/}
              {/*@ input 节点*/}

              {/*将ref的回调函数定义成clss的绑定函数的方式, 可避免上述问题*/}
              <input ref={this.saveInput} type="text" />
              <br />
              <br />
              <button onClick={this.showInfo}>点我提示输入的数据</button>
              <button onClick={this.changeWeather}>点我切换天气</button>
            </div>
          );
        }
      }

      // 渲染组件到页面
      ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
  </body>
</html>
Prev: 回调函数形式的ref Next: createRef的使用