React基础-JSX事件绑定-事件传参

浅浅的花香味﹌ 2023-10-02 20:49 7阅读 0赞

#### 文章目录 ####

*  React的事件绑定
 *   *   *  JSX事件绑定
         *  JSX事件传参
         *  JSX事件小案例练习

## React的事件绑定 ##

#### JSX事件绑定 ####

**如果原生DOM原生有一个监听事件，我们可以如何操作呢?**

> 方式一:获取DOM原生，添加监听事件;
> 
> 方式二:在HTML原生元素中，直接绑定onclick;

**在React中是如何操作呢?我们来实现一下React中的事件监听，和原生想不这里主要有两点不同**

> React 事件的命名采用`小驼峰式`(camelCase)，而不是纯小写;
> 
> 我们需要通过`{}`传入一个事件处理函数，这个函数会在事件发生时被执行;

render() {
        
      return (
        <div>
          <button onClick={
        this.btnClick}>按钮</button> 
        </div>
      )
    }

**在事件执行后，我们可能需要获取当前类的对象中相关的属性，这个时候需要用到this**

> 如果我们这里直接打印this，也会发现它是一个undefined

class App extends React.Component {
        
      constructor() {
        
        super()
      }
    
      render() {
        
        return (
          <div>
            <button onClick={
        this.btnClick}>按钮</button> 
          </div>
        )
      }
    
      btnClick() {
        
        console.log(this); // undefined
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

**为什么是undefined呢?**

> 原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数;
> 
> 而它内部调用时，并不知道要如何绑定正确的this;

**如何解决this的问题呢?例如我们需要点击按钮, 修改页面中展示的数字**

> 方案一:bind给btnClick显示绑定this

class App extends React.Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          conter: 100
        }
    
        this.btnClick1 = this.btnClick1.bind(this)
      }
    
      render() {
        
        const {
         conter } = this.state
    
        return (
          <div>
            <h2>当前计数: {
        conter}</h2>
            {
        /* this绑定方式一: 通过bind显示绑定this */}
            <button onClick={
        this.btnClick1}>按钮1</button> 
          </div>
        )
      }
    
      btnClick1() {
        
        this.setState({
        
          conter: this.state.conter + 1
        })
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

> 方案二:使用 ES6 class fields 语法(了解)

class App extends React.Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          conter: 100
        }
      }
    
      render() {
        
        const {
         conter } = this.state
    
        return (
          <div>
            {
        /* this绑定方式一: 使用 ES6 class fields 语法 */}
            <button onClick={
        this.btnClick2}>按钮2</button> 
          </div>
        )
      }
    
      btnClick2 = () => {
        
        this.setState({
        
          conter: this.state.conter - 1
        })
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

> 方案三:事件监听时直接传入箭头函数(个人推荐)

class App extends React.Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          conter: 100
        }
      }
    
      render() {
        
        const {
         conter } = this.state
    
        return (
          <div>
            {
        /* this绑定方式三: 直接传入一个箭头函数 */}
            <button onClick={
        () => this.btnClick3()}>按钮3</button>
          </div>
        )
      }
    
      btnClick3() {
        
        this.setState({
        
          conter: this.state.conter + 1
        })
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

#### JSX事件传参 ####

**在执行事件函数时，有可能我们需要获取一些参数信息:比如event对象、其他参数**

**情况一:获取event对象**

> 很多时候我们需要拿到event对象来做一些事情(比如阻止默认行为)
> 
> 那么默认情况下，event对象有被直接传入，函数就可以获取到event对象;

class App extends React.Component {
        
      constructor() {
        
        super()
      }
    
      render() {
        
    
        return (
          <div>
            <button onClick={
        this.btnClick1}>按钮1</button> 
          </div>
        )
      }
    
      // 回调函数时会将event对象传递过来的
      btnClick1(event) {
        
        console.log(event);
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

**情况二:获取更多参数**

> 当有更多参数时，我们`最好的方式`就是传入一个箭头函数，主动执行的事件函数，并且传入相关的其他参数;

class App extends React.Component {
        
      constructor() {
        
        super()
      }
    
      render() {
        
    
        return (
          <div>
            <button onClick={
        (event) => this.btnClick2(event, "chenyq", 18)}>按钮2</button>
          </div>
        )
      }
    
      btnClick2(event, name, age) {
        
        console.log(event, name, age);
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)

#### JSX事件小案例练习 ####

**需求: 有一个数组, 用于存放电影列表, 将电影列表展示在页面中, 要求点击哪一个电影名称, 就将哪一个的颜色变为红色**

实例代码如下:

class App extends React.Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          movies: ["大话西游", "黑化律师", "独行月球"],
          currrentIndex: 0
        }
      }
    
      render() {
        
        const {
         movies, currrentIndex } = this.state
    
        return (
          <div>
            <ul>
              {
        
                movies.map((item, index) => {
        
                  return (
                    <li 
                      key={
        item} 
                      onClick={
        () => this.itemClick(index)} 
                      className={
        currrentIndex === index ? 'active' : ''}
                    >
                      {
        item}
                    </li>
                  )
                })
              }  
            </ul> 
          </div>
        )
      }
    
      itemClick(index) {
        
        this.setState({
        
          currrentIndex: index
        })
      }
    }
    
    const app = ReactDOM.createRoot(document.querySelector("#app"))
    app.render(<App/>)