三、React事件绑定与参数传递，实现tab切换点击高亮，JSX语法本质

1. 事件绑定

const root = ReactDOM.createRoot(document.querySelector("#root"))

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            msg: ''
        }
    }
    
    // 通过显示绑定this
    btn1Click(event) {
        console.log("点击了", event);
    }
    
    // 将函数写为箭头函数
    btn2Click = (event) => {
        console.log("点击了", this, event);
    }
    
    // onClick本身接收一个函数，传入箭头函数， 函数体立即执行 传参方便
    btn3Click(event, name, age) {
        console.log("点击了", event, name, age);
    }
    
    
    render() {
        return (
            <div>
                <button onClick={this.btn1Click.bind(this)}>方式一</button>
                <button onClick={this.btn2Click}>方式二</button>
                <button onClick={(e) => {
                    this.btn3Click(e, 'luffy', '20')
                }}>方式三</button>
            </div>
        )
    }
}

root.render(<App />)

2. Tab切换点击高亮

const root = ReactDOM.createRoot(document.querySelector("#root"));

class App extends React.Component {
      constructor() {
        super();
        this.state = {
          tabs: ["动漫", "数码", "钓鱼", "影视"],
          currentIndex: 0,
        };
      }

      tabClick(index) {
        this.setState({
          currentIndex: index,
        });
      }

      render() {
        return (
          <ul>
            {this.state.tabs.map((item, index) => {
              return (
                <li
                  className={this.state.currentIndex === index ? "active" : ""}
                  onClick={() => {
                    this.tabClick(index);
                  }}
                >
                  {item}
                </li>
              );
            })}
          </ul>
        )
      }
    }

root.render(<App />)

3. JSX语法本质

// 本质是React.createElement('div', props, [children])的语法糖
// 参数 元素  属性  子元素
// 创建了一个个虚拟节点 类似于vue中 render中的 h函数  
// React的解析操作是交给Babel进行的