React18中jsx的事件绑定，参数传递，案例演示jsx的事件绑定解决this的问题(bind显示绑定this 使用

jsx的事件绑定

首先解决this的问题

bind显示绑定this
使用ES6 class fields语法
事件监听时传入箭头函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx的事件绑定</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      /***
       * this的四种绑定规则
       * 1.默认绑定  独立函数调用  fn()           -> window
       * 2.隐式绑定   被一个对象调用执行 obj.fn()  -> obj
       * 3.显示绑定   call/apply/bind   fn.call('zm')  -> String("zm")
       * 4.new绑定    new Fn()                    -> 创建一个对象并赋值给this
       */

      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            msg: "hello zm",
            count: 60,
          };
          this.clickHandle = this.clickHandle.bind(this);
        }
        clickHandle() {
          this.setState({
            count: 100,
          });
        }
        // ES6 class fields
        es6ClassFieldsHandle = () => {
          this.setState({
            count: 666,
          });
        };
        btnArrowHandle() {
          console.log("this=> ", this); //组件实例
        }
        render() {
          const { msg, count } = this.state;
          return (
            <div>
              <h2>{msg}</h2>
              {/* 1.this绑定方式1：bind绑定 */}
              <h2 onClick={this.clickHandle}>{count}快来点我呀</h2>

              {/* 2.this绑定方式2：ES6 class fields */}
              <h2 onClick={this.es6ClassFieldsHandle}>{count}快来点我呀</h2>

              {/* 3.this绑定方式三： 直接传入一个箭头函数 */}
              <button onClick={() => this.btnArrowHandle()}> btn arrow</button>
            </div>
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

jsx的事件绑定-传递参数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx的事件绑定-传递参数</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            count: 0,
          };
        }
        btnClick(event, name, age) {
          console.log("btnClick=> ", event, this);
          console.log("name,age=> ", name, age);
        }
        render() {
          return (
            <div>
              <h2>{this.state.count}</h2>
              {/*1.event参数的传递*/}
              <button onClick={this.btnClick.bind(this)}>btn1</button>
              <button onClick={(event) => this.btnClick(event)}>btn2</button>
              {/*2.额外参数的传递*/}
              {/*注意 bind()参数   event -> "zm"  name -> 21  age -> 空  */}
              <button onClick={this.btnClick.bind(this, "zm", 21)}>btn1(not commend)</button>
              <button onClick={(event) => this.btnClick(event, "wzm", 18)}>btn2</button>
            </div>
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>

jsx的事件绑定案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx的事件绑定案例</title>
    <style>
      .active {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      // 定义App根组件
      class App extends React.Component {
        constructor() {
          super();
          this.state = {
            hobby: ["sing", "dance", "rap"],
            currentIndex: 0,
          };
        }
        changeActiveHandle(index) {
          this.setState({
            currentIndex: index,
          });
        }
        render() {
          const { hobby, currentIndex } = this.state;
          return (
            <div>
              <ul>
                {hobby.map((item, index) => (
                  <li
                    onClick={() => this.changeActiveHandle(index)}
                    className={currentIndex === index ? "active" : ""}
                    key={item}
                  >
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          );
        }
      }
      // 2.创建root并且渲染App组件
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>