1、原生js的行间事件绑定
<button onClick={console.log('行间事件的绑定')}>点击触发事件</button>
2、react函数组件事件
函数组件中嵌套着函数去处理点击事件
function Handle() {
function handleClick(e) {
e.preventDefault();
console.log('函数组件点击事件触发')
}
return(
<div>
<button onClick={handleClick}>点击触发</button>
</div>
)
}
// 使用
ReactDOM.render(<Handle/>, document.querySelector('#root'))
3、类组件中在构造函数内部去添加点击事件
// 类组件的使用
class Button extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this)
}
/* 类组件中定义函数 */
handleClick(e) {
console.log(this);
console.log(e.target);
}
/* 使用render函数进行渲染 */
render(){
return (
<button onClick={this.handleClick}>点击触发</button>
)
}
}
打印结果.png
4、传入参数的点击事件写法
// 类组件的使用
class Test extends React.Component {
constructor() {
super();
}
/* 类组件中定义函数 */
handleClick(data,e){
console.log(data)
console.log(e)
}
/* 使用render函数进行渲染 */
render(){
return (
<div>
<button onClick={(e) => this.handleClick('data传入',e)}>点击传入参数的按钮</button>
</div>
)
}
}
运行结果.png
5、点击事件去动态的修改数据内容
类似switch开关操作，通过点击事件触发修改数据的值，然后动态的去修改视图的更新，其中需要用到组件原型链中的setState方法去修改
setState是调用更新视图的方法，它有两个参数，第一个是对象，指明更新对象，第二个则是一个回调函数，回调函数
// 类组件的使用
class Button extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this)
this.state = {
isShow : true
}
}
/* 类组件中定义函数 */
handleClick = () => {
this.setState({
isShow:!this.state.isShow
}, ()=>{
console.log('isShow更新完成',this.state.isShow)
})
}
/* 使用render函数进行渲染 */
render(){
return (
<button onClick={this.handleClick}>{this.state.isShow ? 'ON' :'OFF' }</button>
)
}
}
运行结果.png
6、官方推荐的setState写法
setState(updater, [callback])
setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式,将 setState() 视为请求而不是立即更新组件的命令
this.setState((state,props)=>({
isShow:!state.isShow
}), ()=>{
console.log('isShow更新完成',this.state.isShow)
})
使用state和props作为参数，官方给出的解释是：state 是对应用变化时组件状态的引用。不应直接被修改。使用基于 state 和 props 构建的新对象来表示变化。
// 类组件的使用
class Button extends React.Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this)
this.state = {
isShow : true
}
}
/* 类组件中定义函数 */
handleClick = () => {
this.setState((state,props)=>({
isShow:!state.isShow
}), ()=>{
console.log('isShow更新完成',this.state.isShow)
})
}
/* 使用render函数进行渲染 */
render(){
return (
<button onClick={this.handleClick}>{this.state.isShow ? 'ON' :'OFF' }</button>
)
}
}
