5 Events
5.1
在JSX中，为元素添加事件，事件名称采用驼峰使命名法，事件处理函数通过插值的方式指定。
function App () {
const onClickHandler = (event) => {
console.log(event.target)
}
return <button onClick={ onClickHandler }>button</button>
}
标签属性的方式, 将事件名称作为标签的属性, 将事件处理函数作为属性的值.
事件名称 onClickHandler 要放在插值语法当中. 记得{} , 而不是() , ()表示函数调用.
想为button标签添加点击事件, 所以为button标签添记了onClick属性, 表示该button事件拥有点击事件
event 是参数, 就是说当事件发生时, 所有的信息都要从event中获取. 事件中的this指向的是undefined, 也就是说我们在事件的处理函数中, 是不能处理this的, 如果你想要事件触发的元素, 可以使用event.target属性.
在调用函数时如何向函数传递参数呢？箭头函数
function App () {
const onClickHandler = (arg1, arg2, event) => {}
return <button onClick={(event) => onClickHandler('a'，'b'，event）｝>button</button>
}
箭头函数才是被事件触发的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
<script type="text/babel">
function App() {
const onClickHandler = () => {
alert("button was clicked");
};
return <button onClick={onClickHandler}>Click Me</button>;
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
<script type="text/babel">
function App() {
const onClickHandler = (event) => {
console.log(event);
};
return <button onClick={onClickHandler}>Click Me</button>;
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.13.17/babel.min.js"></script>
<script type="text/babel">
function App() {
const onClickHandler = (arg1, arg2, event) => {
console.log(arg1);
console.log(arg2);
console.log(event);
};
return <button onClick={(event) => onClickHandler('a', 'b', event)}>Click Me</button>;
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
</script>
</html>
