网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
})
}
}
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
})
}
}
const app = ReactDOM.createRoot(document.querySelector(“#app”))
app.render()
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
IJWzux-1715651890955)]
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!