长沙 网站设计 公司,搞外贸一般是干什么的,国内做网站网站,网络公司是做什么参考文章
响应事件
使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数#xff0c;它将在响应交互#xff08;如点击、悬停、表单输入框获得焦点等#xff09;时触发。
添加事件处理函数
如需添加一个事件处理函数#xff0c;需要先定义一个函数…参考文章
响应事件
使用 React 可以在 JSX 中添加 事件处理函数。其中事件处理函数为自定义函数它将在响应交互如点击、悬停、表单输入框获得焦点等时触发。
添加事件处理函数
如需添加一个事件处理函数需要先定义一个函数然后 将其作为 prop 传入 合适的 JSX 标签。例如这里有一个没绑定任何事件的按钮
export default function Button() {return (button未绑定任何事件/button);
}按照如下三个步骤即可让它在用户点击时显示消息
在 Button 组件 内部 声明一个名为 handleClick 的函数。实现函数内部的逻辑使用 alert 来显示消息。添加 onClick{handleClick} 到 button JSX 中。
export default function Button() {function handleClick() {alert(你点击了我);}return (button onClick{handleClick}点我/button);
}可以定义 handleClick 函数然后 将其作为 prop 传入 button。其中 handleClick 是一个 事件处理函数 。事件处理函数有如下特点:
通常在组件 内部 定义。名称以 handle 开头后跟事件名称。 按照惯例通常将事件处理程序命名为 handle后接事件名。会经常看到 onClick{handleClick}onMouseEnter{handleMouseEnter} 等。 或者也可以在 JSX 中定义一个内联的事件处理函数
button onClick{function handleClick() {alert(你点击了我);
}}或者直接使用更为简洁的箭头函数
button onClick{() {alert(你点击了我);
}}以上所有方式都是等效的。当函数体较短时内联事件处理函数会很方便。
传递函数
传递给事件处理函数的函数应直接传递而非调用。例如
传递一个函数正确调用一个函数错误button onClick{handleClick}button onClick{handleClick()}
区别很微妙。在第一个示例中handleClick 函数作为 onClick 事件处理函数传递。这会让 React 记住它并且只在用户点击按钮时调用函数。
在第二个示例中handleClick() 中最后的 () 会在 渲染 过程中 立即 触发函数即使没有任何点击。这是因为在 JSX { 和 } 之间的 JavaScript 会立即执行。
当编写内联代码时同样的陷阱可能会以不同的方式出现
传递一个函数正确调用一个函数错误button onClick{() alert(...)}button onClick{alert(...)}
如果按如下方式传递内联代码并不会在点击时触发而是会在每次组件渲染时触发
// 这个 alert 在组件渲染时触发而不是点击时触发button onClick{alert(你点击了我)}如果想要定义内联事件处理函数请将其包装在匿名函数中如下所示
button onClick{() alert(你点击了我)}这里创建了一个稍后调用的函数而不会在每次渲染时执行其内部代码。
在这两种情况下都应该传递一个函数
button onClick{handleClick} 传递了 handleClick 函数。 button onClick{() alert(...)} 传递了 () alert(...) 函数。
在事件处理函数中读取 props
由于事件处理函数声明于组件内部因此它们可以直接访问组件的 props。示例中的按钮当点击时会弹出带有 message prop 的 alert
function AlertButton({ message, children }) {return (button onClick{() alert(message)}{children}/button);
}export default function Toolbar() {return (divAlertButton message正在播放播放电影/AlertButtonAlertButton message正在上传上传图片/AlertButton/div);
}此处有两个按钮会展示不同的消息。可以尝试更改传递给它们的消息。
将事件处理函数作为 props 传递
通常会在父组件中定义子组件的事件处理函数。比如置于不同位置的 Button 组件可能最终执行的功能也不同 —— 也许是播放电影也许是上传图片。
为此将组件从父组件接收的 prop 作为事件处理函数传递如下所示
function Button({ onClick, children }) {return (button onClick{onClick}{children}/button);
}function PlayButton({ movieName }) {function handlePlayClick() {alert(正在播放 ${movieName});}return (Button onClick{handlePlayClick}播放 {movieName}/Button);
}function UploadButton() {return (Button onClick{() alert(正在上传)}上传图片/Button);
}export default function Toolbar() {return (divPlayButton movieName魔女宅急便 /UploadButton //div);
}示例中Toolbar 组件渲染了一个 PlayButton 组件和 UploadButton 组件
PlayButton 将 handlePlayClick 作为 onClick prop 传入 Button 组件内部。UploadButton 将 () alert(正在上传) 作为 onClick prop 传入 Button 组件内部。
最后Button 组件接收一个名为 onClick 的 prop。它直接将这个 prop 以 onClick{onClick} 方式传递给浏览器内置的 button。当点击按钮时React 会调用传入的函数。
如果遵循某个 设计系统 时按钮之类的组件通常会包含样式但不会指定行为。而 PlayButton 和 UploadButton 之类的组件则会向下传递事件处理函数。
命名事件处理函数 prop
内置组件button 和 div仅支持 浏览器事件名称例如 onClick。但是当构建自己的组件时可以按个人喜好命名事件处理函数的 prop。 按照惯例事件处理函数 props 应该以 on 开头后跟一个大写字母。 例如Button 组件的 onClick prop 本来也可以被命名为 onSmash
function Button({ onSmash, children }) {return (button onClick{onSmash}{children}/button);
}export default function App() {return (divButton onSmash{() alert(正在播放)}播放电影/ButtonButton onSmash{() alert(正在上传)}上传图片/Button/div);
}上述示例中button onClick{onSmash} 代表浏览器内置的 button小写仍然需要使用 onClick prop而自定义的 Button 组件接收到的 prop 名称可由你决定
当组件支持多种交互时可以根据不同的应用程序命名事件处理函数 prop。例如一个 Toolbar 组件接收 onPlayMovie 和 onUploadImage 两个事件处理函数
export default function App() {return (ToolbaronPlayMovie{() alert(正在播放)}onUploadImage{() alert(正在上传)}/);
}function Toolbar({ onPlayMovie, onUploadImage }) {return (divButton onClick{onPlayMovie}播放电影/ButtonButton onClick{onUploadImage}上传图片/Button/div);
}function Button({ onClick, children }) {return (button onClick{onClick}{children}/button);
} 注意App 组件并不需要知道 Toolbar 将会对 onPlayMovie 和 onUploadImage 做 什么 。上述示例是 Toolbar 的实现细节。其中Toolbar 将它们作为 onClick 处理函数传递给了 Button 组件其实还可以通过键盘快捷键来触发它们。根据应用程序特定的交互方式如 onPlayMovie来命名 prop 可以让你灵活地更改以后使用它们的方式。
注意确保为事件处理程序使用适当的HTML标记。例如要处理点击要使用button onClick{handleClick} 而不是 div onClick{handleClick} 。使用真正的浏览器button可以实现内置的浏览器行为如键盘导航。如果不喜欢按钮的默认浏览器样式并想让它看起来更像一个链接或不同的UI元素可以用CSS来实现。
事件传播
事件处理函数还将捕获任何来自子组件的事件。通常我们会说事件会沿着树向上“冒泡”或“传播”它从事件发生的地方开始然后沿着树向上传播。
下面这个 div 包含两个按钮。div 和每个按钮都有自己的 onClick 处理函数。你认为点击按钮时会触发哪些处理函数
export default function Toolbar() {return (div classNameToolbar onClick{() {alert(你点击了 toolbar );}}button onClick{() alert(正在播放)}播放电影/buttonbutton onClick{() alert(正在上传)}上传图片/button/div);
}如果点击任一按钮它自身的 onClick 将首先执行然后父级 div 的 onClick 会接着执行。因此会出现两条消息。如果点击 toolbar 本身将只有父级 div 的 onClick 会执行。
注意在 React 中所有事件都会传播除了 onScroll它仅适用于你附加到的 JSX 标签。
阻止传播
事件处理函数接收一个 事件对象 作为唯一的参数。按照惯例它通常被称为 e 代表 “event”事件。可以使用此对象来读取有关事件的信息。
这个事件对象还允许阻止传播。如果想阻止一个事件到达父组件需要像下面 Button 组件那样调用 e.stopPropagation()
function Button({ onClick, children }) {return (button onClick{e {e.stopPropagation();onClick();}}{children}/button);
}export default function Toolbar() {return (div classNameToolbar onClick{() {alert(你点击了 toolbar );}}Button onClick{() alert(正在播放)}播放电影/ButtonButton onClick{() alert(正在上传)}上传图片/Button/div);
}当点击按钮时
React 调用了传递给 button 的 onClick 处理函数。定义在 Button 中的处理函数执行了如下操作 调用 e.stopPropagation()阻止事件进一步冒泡。调用 onClick 函数它是从 Toolbar 组件传递过来的 prop。 在 Toolbar 组件中定义的函数显示按钮对应的 alert。由于传播被阻止父级 div 的 onClick 处理函数不会执行。
由于调用了 e.stopPropagation()点击按钮现在将只显示一个 alert来自 button而并非两个分别来自 button 和父级 toolbar div。点击按钮与点击周围的 toolbar 不同因此阻止传播对这个 UI 是有意义的。
传递处理函数作为事件传播的替代方案
注意此处的点击事件处理函数先执行了一行代码然后调用了父组件传递的 onClick prop
function Button({ onClick, children }) {return (button onClick{e {e.stopPropagation();onClick();}}{children}/button);
}也可以在调用父元素 onClick 函数之前向这个处理函数添加更多代码。此模式是事件传播的另一种 替代方案 。它让子组件处理事件同时也让父组件指定一些额外的行为。与事件传播不同它并非自动。但使用这种模式的好处是可以清楚地追踪因某个事件的触发而执行的整条代码链。
如果依赖于事件传播而且很难追踪哪些处理程序在执行及其执行的原因可以尝试这种方法。
阻止默认行为
某些浏览器事件具有与事件相关联的默认行为。例如点击 form 表单内部的按钮会触发表单提交事件默认情况下将重新加载整个页面
export default function Signup() {return (form onSubmit{() alert(提交表单)}input /button发送/button/form);
}可以调用事件对象中的 e.preventDefault() 来阻止这种情况发生
export default function Signup() {return (form onSubmit{e {e.preventDefault();alert(提交表单);}}input /button发送/button/form);
}不要混淆 e.stopPropagation() 和 e.preventDefault()。它们都很有用但二者并不相关
e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。e.preventDefault() 阻止少数事件的默认浏览器行为。
事件处理函数可以包含副作用
当然可以事件处理函数是执行副作用的最佳位置。
与渲染函数不同事件处理函数不需要是 纯函数因此它是用来 更改 某些值的绝佳位置。例如更改输入框的值以响应键入或者更改列表以响应按钮的触发。但是为了更改某些信息首先需要某种方式存储它。在 React 中这是通过 state组件的记忆 来完成的。
摘要
可以通过将函数作为 prop 传递给元素如 button 来处理事件。必须传递事件处理函数而非函数调用 onClick{handleClick} 不是 onClick{handleClick()}。可以单独或者内联定义事件处理函数。事件处理函数在组件内部定义所以它们可以访问 props。可以在父组件中定义一个事件处理函数并将其作为 prop 传递给子组件。可以根据特定于应用程序的名称定义事件处理函数的 prop。事件会向上传播。通过事件的第一个参数调用 e.stopPropagation() 来防止这种情况。事件可能具有不需要的浏览器默认行为。调用 e.preventDefault() 来阻止这种情况。从子组件显式调用事件处理函数 prop 是事件传播的另一种优秀替代方案。
