大数据最全React基础-JSX事件绑定-事件传参_jsx点击事件(1)，2024年最新重难点整理

2401_84164672

于 2024-05-15 13:38:56 发布

阅读量980

点赞数 9

文章标签：大数据面试学习

本文链接：https://blog.csdn.net/2401_84164672/article/details/138905614

版权

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

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()



> 
> 方案二:使用 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()



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

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()


#### 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()


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



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

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()


#### 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
})