函数之JavaScript、Vue 与 React+JSX
程序员文章站
2022-06-19 16:27:31
一、函数之 JavaScript test
一、函数之 JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
</head>
<body>
<button id="btn1">click one</button>
<button id="btn2">click two</button>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = fn
btn2.onclick = fn()
function fn(){
console.log(333);
return (function f(){
console.log("hello world")
}).bind(this)
}
</script>
<body>
<html>
执行上述代码后:
第一个 button 没有任何打印,当点击该按钮时,打印:333;
第二个 button 打印 333,当点击该按钮时,继续打印:hello world
二、函数之 Vue
<template>
<div>
<button @click="handleClick">Click Me</button>
<button @click="handleClick()">Click Me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
console.log(333)
return () => {
console.log("hello world")
}
}
}
}
</script>
执行上述代码后,没有任何打印,当点击这两个button时,结果都一样:hello world。
三、函数之 React+JSX
import { Component } from 'react'
class Test extends Component {
const handlerClick = () => {
console.log(333)
return () => {
console.log("hello world");
}
}
render () {
return (
this.state.list.map((item, idx) => {
return (
<button onClick="this.handlerClick">click me</button>
<button onClick="this.handlerClick()">click me</button>
);
})
);
}
}
export default Test;
执行上述代码后:
第一个 button 没有任何打印,当点击该按钮时,打印:333;
第二个 button 打印 333,当点击该按钮时,继续打印:hello world
本文地址:https://blog.csdn.net/mChales_Liu/article/details/112558081