品牌网站建设 细致磐石网络,营销公司网站模板,wordpress 文件权限设置,可视化网站开发平台文章目录 1、React中的事件绑定1.1 基础事件绑定1.2 使用事件对象参数1.3 传递自定义参数1.4 同时传递事件对象和自定义参数 2、React中的组件3、useState 1、React中的事件绑定
1.1 基础事件绑定
语法#xff1a;on 事件名称 { 事件处理程序 }#xff0c;整体上遵循驼峰… 文章目录 1、React中的事件绑定1.1 基础事件绑定1.2 使用事件对象参数1.3 传递自定义参数1.4 同时传递事件对象和自定义参数 2、React中的组件3、useState 1、React中的事件绑定
1.1 基础事件绑定
语法on 事件名称 { 事件处理程序 }整体上遵循驼峰命名法
function App() {const handleClick () {console.log(button被点击了)}return (button onClick{handleClick} click here/button);
}1.2 使用事件对象参数
语法在事件回调函数中设置形参e 1.3 传递自定义参数
语法事件绑定的位置改造成箭头函数的写法在执行clickHandler实际处理业务函数的时候传递实参
注意:不能直接写函数调用这里事件绑定需要一个函数引用 ()
1.4 同时传递事件对象和自定义参数
语法在事件绑定的位置传递事件实参e和自定义参数clickHandler中声明形参注意顺序对应 2、React中的组件
一个组件就是用户界面的一部分它可以有自己的逻辑和外观组件之间可以互相嵌套也可以复用多次。如一个资讯类的网页组件化之后
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用 // function定义组件
function Button() {// 组件内部的逻辑return buttonclick here!/button
}// 箭头函数也可以定义组件
const Button2 () {// 组件内部的逻辑return buttonclick here!/button
}
function App() {return (div classNameApp{/*组件的使用方式一自闭和*/}Button/Button2/{/*组件的使用方式二成对标签*/}Button/ButtonButton2/Button2/div)
}
效果 3、useState
关键点
调用useState函数可以添加一个状态变量修改状态变量的值视图就会重新渲染 使用useState实现一个计数器按钮重点体会useState重新使用新的count渲染UI的亮点
import {useState} from react;function App() {// 1. 调用useState定义一个变量并初始化为0// count即状态变量// setCount即状态变量的更新函数const [count, setCount] useState(0)// 2.定义点击事件回调函数const handleClick () {// 使用setCount一来修改count值二来重新使用新的count渲染UIsetCount(count 1)}return (div classNameAppbutton onClick{handleClick}{count}/button/div)
}在React中状态被认为是只读的我们应该始终替换它而不是修改它直接修改状态不能引发视图更新必须是调用useState的setCount方法 同理对于一个对象类型的状态变量应该始终传给set方法一个全新的对象来进行修改 // 错误示范
function App() {const [form, setForm] useState({name: Jack})const changeForm () {form.name Tom}return (div classNameAppbutton onClick{() changeForm}{form.name}/button/div)
}修改
const changeForm () {// 错误写法直接修改//form.name Tom// 正确写法setForm传入一个全新的对象setForm({...form,name: Tom})
}
