197 words
1 minutes
React中响应
onClick的三种形式
- 在组件内部定义用function或者const定义函数,并将其以prop形式传递。注意传递函数名,不带
()
如果传入
funcName()
则不能达到效果
- 在onClick内声明函数:
<button onClick={function handleClick() {
alert('你点击了我!');
}}>
- 在onClick内用箭头函数:
<button onClick={() => {
alert('你点击了我!');
}}>
如果直接传入花括号内的内容也不能达到效果。会在渲染过程中执行该内容,而不是点击时。
响应的传播
- A中直接包含B,且A、B均有onClick。当点击B时,会先执行B的响应函数,再执行A的响应函数。类似“冒泡”。
- 阻止传播:在A中响应函数中:
<div onClick={(e) => {
e.preventDefault();
alert('你点击了 toolbar !');
}}>