{"id":1224,"date":"2024-07-28T02:39:24","date_gmt":"2024-07-27T18:39:24","guid":{"rendered":"http:\/\/codermr.com\/?p=1224"},"modified":"2024-07-28T13:42:10","modified_gmt":"2024-07-28T05:42:10","slug":"responding-to-events","status":"publish","type":"post","link":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/","title":{"rendered":"Responding to Events"},"content":{"rendered":"\n<p>React lets you add <em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>event handlers<\/strong><\/mark><\/em> to your JSX. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Event handlers are your own functions that will <strong>be triggered in response<\/strong> to interactions like clicking, hovering, focusing form inputs, and so on.<\/mark><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">To learn<\/h3>\n\n\n\n<ul>\n<li>Different ways to write an event handler<\/li>\n\n\n\n<li>How to <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">pass<\/mark> event handling logic <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">from<\/mark> a parent component\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5982\u4f55\u4ece\u7236\u7ec4\u4ef6\u4f20\u9012\u4e8b\u4ef6\u5904\u7406\u903b\u8f91<\/mark>\uff09<\/li>\n\n\n\n<li>How events <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">propagate<\/mark><\/strong> and how to stop them\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u4e8b\u4ef6\u5982\u4f55\u4f20\u64ad\u4ee5\u53ca\u5982\u4f55\u505c\u6b62\u5b83\u4eec<\/mark>\uff09<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adding-event-handlers\">Adding event handlers&nbsp;<a href=\"https:\/\/react.dev\/learn\/responding-to-events#adding-event-handlers\"><\/a><\/h2>\n\n\n\n<p>To add an event handler, you will first define a function and then <a href=\"https:\/\/react.dev\/learn\/passing-props-to-a-component\">pass it as a prop<\/a> to the appropriate JSX tag\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5982\u9700\u6dfb\u52a0\u4e00\u4e2a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u4f60\u9700\u8981\u5148\u5b9a\u4e49\u4e00\u4e2a\u51fd\u6570\uff0c\u7136\u540e <a href=\"https:\/\/zh-hans.react.dev\/learn\/passing-props-to-a-component\">\u5c06\u5176\u4f5c\u4e3a prop \u4f20\u5165<\/a> \u5408\u9002\u7684 JSX \u6807\u7b7e\u3002<\/mark>\uff09. For example, here is a button that doesn\u2019t do anything yet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function Button() {\n  return (\n    &lt;button&gt;\n      I don't do anything\n    &lt;\/button&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-62.png\"><img loading=\"lazy\" decoding=\"async\" width=\"570\" height=\"67\" src=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-62.png\" alt=\"\" class=\"wp-image-1225\" srcset=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-62.png 570w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-62-300x35.png 300w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/a><\/figure>\n\n\n\n<p>You can make it show a message when a user clicks by following these three steps\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u53e5\u5b50\u610f\u601d\u662f&#8221;You can make it show a message by following these three steps  when a user clicks &#8220;\uff0c\u522b\u7ffb\u8bd1\u9519\u4e86<\/mark>\uff09:<\/p>\n\n\n\n<ol>\n<li>Declare a function called\u00a0<code>handleClick<\/code>\u00a0<em>inside<\/em>\u00a0your\u00a0<code>Button<\/code>\u00a0component.\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u6ce8\u610f\u662f\u5728\u4f60\u7684\u7ec4\u4ef6\u4e2d\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u65b9\u6cd5<\/mark>\uff09<\/li>\n\n\n\n<li>Implement the logic inside that function (use\u00a0<code>alert<\/code>\u00a0to show the message).<\/li>\n\n\n\n<li>Add\u00a0<code>onClick={handleClick}<\/code>\u00a0to the\u00a0<code>&lt;button><\/code>\u00a0JSX.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function Button() {\n  \/* \u2588\u2588 \u8fd9\u4e2a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4f1a\u4f20\u9012\u7ed9 &lt;button ..\/> \u6309\u94ae \u2588\u2588 *\/\n  function handleClick() {\n    alert('\u4f60\u70b9\u51fb\u4e86\u6211\uff01');\n  }\n\n  return (\n    &lt;button onClick={handleClick}>\n      \u70b9\u6211\n    &lt;\/button>\n  );\n}<\/code><\/pre>\n\n\n\n<p>You defined the <code>handleClick<\/code> function and then <a href=\"https:\/\/react.dev\/learn\/passing-props-to-a-component\">passed it as a prop<\/a> to <code>&lt;button><\/code>. <code>handleClick<\/code> is an <strong>event handler.<\/strong> Event handler functions:<\/p>\n\n\n\n<ul>\n<li>Are usually defined\u00a0<em>inside<\/em>\u00a0your components.\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u901a\u5e38\u5199\u5728\u4f60\u7684\u7ec4\u4ef6\u5185\u90e8<\/mark><\/strong>\uff09<\/li>\n\n\n\n<li>Have names that start with\u00a0<code>handle<\/code>, followed by the name of the event.\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u7684\u547d\u540d\uff0c\u901a\u5e38\u4ee5 handle \u5f00\u5934\uff0c\u7136\u540e\u8ddf\u4e0a\u5177\u4f53\u4e8b\u4ef6\u7684\u540d\u5b57<\/mark><\/strong>\uff09<\/li>\n<\/ul>\n\n\n\n<p>By convention\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u6309\u7167\u60ef\u4f8b<\/mark>\uff09, it is common to name event handlers as <code>handle<\/code> followed by the event name. You\u2019ll often see <code>onClick={handleClick}<\/code>, <code>onMouseEnter={handleMouseEnter}<\/code>, and so on.<\/p>\n\n\n\n<p>Alternatively\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u6216\u8005\u3001\u505a\u4e3a\u9009\u62e9<\/mark>\uff09, you can define an event handler inline in the JSX:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button onClick={function handleClick() {\n  alert('\u4f60\u70b9\u51fb\u4e86\u6211\uff01');\n}}><\/code><\/pre>\n\n\n\n<p>Or, more <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">concisely<\/mark>, using an arrow function:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button onClick={() => {\n  alert('You clicked me!');\n}}><\/code><\/pre>\n\n\n\n<p>All of these styles are equivalent. Inline event handlers are convenient for short functions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pitfall\uff08\u9677\u9631\uff09\uff1a<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Functions passed to event handlers must be passed, not called\uff08\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u5e94\u8be5\u53ea\u4f20\u9012\uff0c\u800c\u975e\u8c03\u7528\uff09. For example:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>passing a function (correct)<\/th><th>calling a function (incorrect)<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;button onClick={handleClick}&gt;<\/code><\/td><td><code>&lt;button onClick={handleClick()}&gt;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>The difference is subtle\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u533a\u522b\u5f88\u5fae\u5999<\/mark>\uff09. In the first example, the <code>handleClick<\/code> function is passed as an <code>onClick<\/code> event handler. This tells React to remember it and only call your function when the user clicks the button.<\/p>\n\n\n\n<p>In the second example, the <code>()<\/code> at the end of <code>handleClick()<\/code> fires the function <em>immediately<\/em> during <a href=\"https:\/\/react.dev\/learn\/render-and-commit\">rendering<\/a>, without any clicks. This is because JavaScript inside the <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\">JSX <code>{<\/code> and <code>}<\/code><\/a> executes right away.\u3010\u5728\u7b2c\u4e8c\u4e2a\u793a\u4f8b\u4e2d\uff0c<code>handleClick()<\/code> \u4e2d\u6700\u540e\u7684 <code>()<\/code> \u4f1a\u5728\u6bcf\u6b21 <a href=\"https:\/\/zh-hans.react.dev\/learn\/render-and-commit\">\u6e32\u67d3<\/a> \u8fc7\u7a0b\u4e2d <strong>\u7acb\u5373<\/strong> \u89e6\u53d1\u51fd\u6570\uff0c\u5373\u4f7f\u6ca1\u6709\u4efb\u4f55\u70b9\u51fb\u3002\u8fd9\u662f\u56e0\u4e3a\u5728 <a href=\"https:\/\/zh-hans.react.dev\/learn\/javascript-in-jsx-with-curly-braces\">JSX <code>{<\/code> \u548c <code>}<\/code><\/a> \u4e4b\u95f4\u7684 JavaScript \u4f1a\u7acb\u5373\u6267\u884c\u3002\u3011<\/p>\n\n\n\n<p>When you write code inline, the same pitfall presents itself in a different way:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>passing a function (correct)<\/th><th>calling a function (incorrect)<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;button onClick={() =&gt; alert('...')}&gt;<\/code><\/td><td><code>&lt;button onClick={alert('...')}&gt;<\/code><\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">\u56e0\u4e3a <code>() => alert('...')<\/code> \u53ea\u662f\u5b9a\u4e49\u4e86\u4e00\u4e2a\u51fd\u6570\uff0c\u8fd9\u5c31\u662f\u5b9a\u4e49\u51fd\u6570\u7684\u8bed\u6cd5\uff08\u5728Java\u4e2d\u4ea6\u662f\u5982\u6b64\uff09\uff01<\/figcaption><\/figure>\n\n\n\n<p>Passing inline code like this won\u2019t fire on click\u2014it fires every time the component renders:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ This alert fires when the component renders, not when clicked!\n&lt;button onClick={alert('You clicked me!')}><\/code><\/pre>\n\n\n\n<p>If you want to define your event handler inline, wrap it in an <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">anonymous function<\/mark> like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button onClick={() => alert('You clicked me!')}><\/code><\/pre>\n\n\n\n<p>Rather than executing the code inside with every render, this creates a function to be called later.<\/p>\n\n\n\n<p>In both cases, what you want to pass is a function:<\/p>\n\n\n\n<ul>\n<li><code>&lt;button onClick={handleClick}><\/code>\u00a0passes the\u00a0<code>handleClick<\/code>\u00a0function.<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">\u3010<code>&lt;button onClick={handleClick}><\/code>\u00a0\u4f20\u9012\u4e86\u00a0<code>handleClick<\/code>\u00a0\u51fd\u6570\u3002\u3011<\/mark><\/li>\n\n\n\n<li><code>&lt;button onClick={() => alert('...')}><\/code>\u00a0passes the\u00a0<code>() => alert('...')<\/code>\u00a0function. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">\u3010<code>&lt;button onClick={() => alert('...')}><\/code>\u00a0\u4f20\u9012\u4e86\u00a0<code>() => alert('...')<\/code>\u00a0\u51fd\u6570\u3002\u3011<\/mark><\/li>\n<\/ul>\n\n\n\n<p><a href=\"https:\/\/javascript.info\/arrow-functions-basics\" target=\"_blank\" rel=\"noreferrer noopener\">Read more about arrow functions.<\/a><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"reading-props-in-event-handlers\">Reading props in event handlers\u00a0<a href=\"https:\/\/react.dev\/learn\/responding-to-events#reading-props-in-event-handlers\"><\/a>\uff08\u5728\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e2d\u8bfb\u53d6 props\u00a0\uff09<\/h2>\n\n\n\n<p>Because event handlers are declared inside of a component, they have access to the component\u2019s props\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5b83\u4eec\u53ef\u4ee5\u76f4\u63a5\u8bbf\u95ee\u7ec4\u4ef6\u7684 props<\/mark>\uff09. Here is a button that, when clicked, shows an alert with its <code>message<\/code> prop:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function AlertButton({ message, children }) {\n  return (\n    &lt;button onClick={() => alert(message)}>\n      {children}\n    &lt;\/button>\n  );\n}\n\nexport default function Toolbar() {\n  return (\n    &lt;div>\n      &lt;AlertButton message=\"\u6b63\u5728\u64ad\u653e\uff01\">\n        \u64ad\u653e\u7535\u5f71\n      &lt;\/AlertButton>\n      &lt;AlertButton message=\"\u6b63\u5728\u4e0a\u4f20\uff01\">\n        \u4e0a\u4f20\u56fe\u7247\n      &lt;\/AlertButton>\n    &lt;\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>This lets these two buttons show different messages. Try changing the messages passed to them.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"passing-event-handlers-as-props\">Passing event handlers as props\u00a0<a href=\"https:\/\/react.dev\/learn\/responding-to-events#passing-event-handlers-as-props\"><\/a>\uff08\u5c06\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4f5c\u4e3a props \u4f20\u9012\uff09<\/h3>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">Often you\u2019ll want the parent component to specify a child\u2019s event handler<\/mark>. Consider buttons: depending on where you\u2019re using a <code>Button<\/code> component, you might want to execute a different function\u2014perhaps one plays a movie and another uploads an image.<\/p>\n\n\n\n<p>To do this, pass a prop <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\"><strong><em>the component receives from its parent<\/em><\/strong><\/mark> as the event handler like so:<br><strong><em>\u3010\u5148\u662f pass a prop \u610f\u601d\u662f&#8221;\u4f20\u9012\u4e00\u4e2aprop&#8221;\uff0c\u7136\u540e <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">the component receives from its parent<\/mark> \u662f\u5b9a\u8bed\u4ece\u53e5\u4fee\u9970 prop\uff0c\u610f\u601d\u662f\u8fd9\u4e2a prop \u662f\u8fd9\u4e2a component \u4ece\u5b83\u7684\u7236\u7ec4\u4ef6\u91cc\u63a5\u6536\u7684\u3002as the event handler \u662f\u6307 prop as the event handler\u3002==\u300b\u6700\u7ec8\u7ffb\u8bd1\u5c31\u662f\uff1a\u5b50 component \u4ece\u7236 component \u63a5\u6536\u4e86\u4e00\u4e2a prop\uff0c\u800c\u8fd9\u4e2a prop \u4f5c\u4e3a\u5b50 component \u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3011<\/em><\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u8fd9\u91cc Button \u662f\u5b50\u7ec4\u4ef6\uff0c\u5b83\u63a5\u6536\u7684\u4e8b\u4ef6\u5904\u7406\u51fd\u6570 onClick \u662f\u4ece\u7236\u7ec4\u4ef6 PlayButton \u4f20\u9012\u8fc7\u6765\u7684\nfunction Button({ onClick, children }) {\n    return (\n      &lt;button onClick={onClick}>\n        {children}\n      &lt;\/button>\n    );\n  }\n  \n  function PlayButton({ movieName }) {\n    function handlePlayClick() {\n      alert(`\u6b63\u5728\u64ad\u653e ${movieName}\uff01`);\n    }\n  \n    return (\n      &lt;Button onClick={handlePlayClick}>\n        \u64ad\u653e \"{movieName}\"\n      &lt;\/Button>\n    );\n  }\n  \n  function UploadButton() {\n    return (\n      &lt;Button onClick={() => alert('\u6b63\u5728\u4e0a\u4f20\uff01')}>\n        \u4e0a\u4f20\u56fe\u7247\n      &lt;\/Button>\n    );\n  }\n  \n  export default function Toolbar() {\n    return (\n      &lt;div>\n        &lt;PlayButton movieName=\"\u9b54\u5973\u5b85\u6025\u4fbf\" \/>\n        &lt;UploadButton \/>\n      &lt;\/div>\n    );\n  }<\/code><\/pre>\n\n\n\n<p>Here, the <code>Toolbar<\/code> component renders a <code>PlayButton<\/code> and an <code>UploadButton<\/code>:<\/p>\n\n\n\n<ul>\n<li><code>PlayButton<\/code>\u00a0passes\u00a0<code>handlePlayClick<\/code>\u00a0as the\u00a0<code>onClick<\/code>\u00a0prop to the\u00a0<code>Button<\/code>\u00a0inside.<\/li>\n\n\n\n<li><code>UploadButton<\/code>\u00a0passes\u00a0<code>() => alert('Uploading!')<\/code>\u00a0as the\u00a0<code>onClick<\/code>\u00a0prop to the\u00a0<code>Button<\/code>\u00a0inside.<\/li>\n<\/ul>\n\n\n\n<p>Finally, your <code>Button<\/code> component accepts a prop called <code>onClick<\/code>. It passes that prop directly to the built-in browser <code>&lt;button&gt;<\/code> with <code>onClick={onClick}<\/code>. This tells React to call the passed function on click.<\/p>\n\n\n\n<p>If you use a <a href=\"https:\/\/uxdesign.cc\/everything-you-need-to-know-about-design-systems-54b109851969\" target=\"_blank\" rel=\"noreferrer noopener\">design system<\/a>, it\u2019s common for components like buttons to contain styling but not specify behavior. Instead, components like <code>PlayButton<\/code> and <code>UploadButton<\/code> will pass event handlers down.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"naming-event-handler-props\">Naming event handler props\u00a0<a href=\"https:\/\/react.dev\/learn\/responding-to-events#naming-event-handler-props\"><\/a>\uff08\u547d\u540d\u4e8b\u4ef6\u5904\u7406\u51fd\u6570 prop\uff09<\/h3>\n\n\n\n<p>Built-in components like <code>&lt;button&gt;<\/code> and <code>&lt;div&gt;<\/code> only support <a href=\"https:\/\/react.dev\/reference\/react-dom\/components\/common#common-props\">browser event names<\/a> like <code>onClick<\/code>. However, when you\u2019re building your own components, you can name their event handler props any way that you like.<\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">By convention<\/mark>, event handler props should start with <code>on<\/code>, followed by a capital letter.\uff08\u6309\u7167\u60ef\u4f8b\uff0c\u4e8b\u4ef6\u5904\u7406\u51fd\u6570 props \u5e94\u8be5\u4ee5 <code>on<\/code> \u5f00\u5934\uff0c\u540e\u8ddf\u4e00\u4e2a\u5927\u5199\u5b57\u6bcd\u3002\uff09<\/p>\n\n\n\n<p>For example, the <code>Button<\/code> component\u2019s <code>onClick<\/code> prop could have been called <code>onSmash<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Button({ onSmash, children }) {\n  return (\n    &lt;button onClick={onSmash}>\n      {children}\n    &lt;\/button>\n  );\n}\n\nexport default function App() {\n  return (\n    &lt;div>\n      &lt;Button onSmash={() => alert('\u6b63\u5728\u64ad\u653e\uff01')}>\n        \u64ad\u653e\u7535\u5f71\n      &lt;\/Button>\n      &lt;Button onSmash={() => alert('\u6b63\u5728\u4e0a\u4f20\uff01')}>\n        \u4e0a\u4f20\u56fe\u7247\n      &lt;\/Button>\n    &lt;\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<p>In this example, <code>&lt;button onClick={onSmash}><\/code> shows that the browser <code>&lt;button><\/code> (lowercase) still needs a prop called <code>onClick<\/code>, but <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><em>the prop name<\/em><strong><em> received by your custom <code>Button<\/code> component<\/em><\/strong> is up to you!<\/mark>\u3010<strong>\u7ffb\u8bd1<\/strong>\uff1a<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><strong><em>received by your custom <code>Button<\/code> component<\/em><\/strong><\/mark> \u662f\u5b9a\u8bed\u4ece\u53e5\uff0c\u4fee\u9970 <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><em>the prop name<\/em><\/mark>\uff0c\u610f\u601d\u662f\u8fd9\u4e2a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><em>prop name<\/em><\/mark> \u88ab\u4f60\u81ea\u5b9a\u4e49\u7684 Button \u7ec4\u4ef6\u63a5\u6536\uff0c\u8fd9\u4e2a <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><em>prop name<\/em><\/mark> \u662f\u5565\u53d6\u51b3\u4e8e\u4f60\u3011<\/p>\n\n\n\n<p>When your component supports multiple interactions, you might name event handler props for app-specific concepts\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5f53\u60a8\u7684\u7ec4\u4ef6\u652f\u6301\u591a\u4e2a\u4ea4\u4e92\u65f6\uff0c\u60a8\u53ef\u4ee5\u4e3a\u7279\u5b9a\u4e8e\u5e94\u7528\u7684\u6982\u5ff5\uff0c\u547d\u540d event handler props<\/mark>\uff09. For example, this <code>Toolbar<\/code> component receives <code>onPlayMovie<\/code> and <code>onUploadImage<\/code> event handlers:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  return (\n    &lt;Toolbar\n      onPlayMovie={() => alert('\u6b63\u5728\u64ad\u653e\uff01')}\n      onUploadImage={() => alert('\u6b63\u5728\u4e0a\u4f20\uff01')}\n    \/>\n  );\n}\n\nfunction Toolbar({ onPlayMovie, onUploadImage }) {\n  return (\n    &lt;div>\n      &lt;Button onClick={onPlayMovie}>\n        \u64ad\u653e\u7535\u5f71\n      &lt;\/Button>\n      &lt;Button onClick={onUploadImage}>\n        \u4e0a\u4f20\u56fe\u7247\n      &lt;\/Button>\n    &lt;\/div>\n  );\n}\n\nfunction Button({ onClick, children }) {\n  return (\n    &lt;button onClick={onClick}>\n      {children}\n    &lt;\/button>\n  );\n}<\/code><\/pre>\n\n\n\n<p>Notice how the <code>App<\/code> component does not need to know <em>what<\/em> <code>Toolbar<\/code> will do with <code>onPlayMovie<\/code> or <code>onUploadImage<\/code>. That\u2019s an implementation detail of the <code>Toolbar<\/code>. Here, <code>Toolbar<\/code> passes them down as <code>onClick<\/code> handlers to its <code>Button<\/code>s, but it could later also trigger them on a keyboard shortcut. Naming props after app-specific interactions like <code>onPlayMovie<\/code> gives you the flexibility to change how they\u2019re used later.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Note<\/h3>\n\n\n\n<p>Make sure that you use the appropriate HTML tags <strong><em>for<\/em><\/strong> your event handlers\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u786e\u4fdd\u4e3a\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u4f7f\u7528\u9002\u5f53\u7684 HTML \u6807\u7b7e<\/mark>\uff09. For example, to handle clicks, use <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/button\" target=\"_blank\" rel=\"noreferrer noopener\"><code>&lt;button onClick={handleClick}><\/code><\/a> instead of <code>&lt;div onClick={handleClick}><\/code>. Using a real browser <code>&lt;button><\/code> enables built-in browser behaviors like keyboard navigation. If you don\u2019t like the default browser styling of a button and want to make it look more like a link or a different UI element, you can achieve it with CSS. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Accessibility\/HTML\" target=\"_blank\" rel=\"noreferrer noopener\">Learn more about writing accessible markup.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"event-propagation\">Event propagation\u00a0<a href=\"https:\/\/react.dev\/learn\/responding-to-events#event-propagation\"><\/a>\uff08\u2588\u2588 \u4e8b\u4ef6\u4f20\u64ad \u2588\u2588\uff09<\/h2>\n\n\n\n<p>Event handlers will also catch events from any children your component might have. We say that an event \u201cbubbles\u201d or \u201cpropagates\u201d <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">up the tree<\/mark><\/strong>: it starts with where the event happened, and then <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">goes up the tree<\/mark><\/strong>.\u3010\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u8fd8\u5c06\u6355\u83b7\u4efb\u4f55\u6765\u81ea\u5b50\u7ec4\u4ef6\u7684\u4e8b\u4ef6\u3002\u901a\u5e38\uff0c\u6211\u4eec\u4f1a\u8bf4\u4e8b\u4ef6\u4f1a\u6cbf\u7740\u6811\u5411\u4e0a\u201c\u5192\u6ce1\u201d\u6216\u201c\u4f20\u64ad\u201d\uff1a\u5b83\u4ece\u4e8b\u4ef6\u53d1\u751f\u7684\u5730\u65b9\u5f00\u59cb\uff0c\u7136\u540e\u6cbf\u7740\u6811\u5411\u4e0a\u4f20\u64ad\u3002\u3011bubble \u5192\u6ce1\uff1b<\/p>\n\n\n\n<p>This <code>&lt;div><\/code> contains two buttons. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\"><strong><em>Both<\/em><\/strong><\/mark> the <code>&lt;div><\/code> <em><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">and<\/mark><\/strong><\/em> each button have their own <code>onClick<\/code> handlers. Which handlers do you think will fire when you click a button?\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u4e0b\u9762\u8fd9\u4e2a <code>&lt;div><\/code> \u5305\u542b\u4e24\u4e2a\u6309\u94ae\u3002<code>&lt;div><\/code> \u548c\u6bcf\u4e2a\u6309\u94ae\u90fd\u6709\u81ea\u5df1\u7684 <code>onClick<\/code> \u5904\u7406\u51fd\u6570\u3002\u4f60\u8ba4\u4e3a\u70b9\u51fb\u6309\u94ae\u65f6\u4f1a\u89e6\u53d1\u54ea\u4e9b\u5904\u7406\u51fd\u6570\uff1f<\/mark>\uff09<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function Toolbar() {\n  return (\n    &lt;div className=\"Toolbar\" onClick={() => {\n      alert('\u4f60\u70b9\u51fb\u4e86 toolbar \uff01');\n    }}>\n      &lt;button onClick={() => alert('\u6b63\u5728\u64ad\u653e\uff01')}>\n        \u64ad\u653e\u7535\u5f71\n      &lt;\/button>\n      &lt;button onClick={() => alert('\u6b63\u5728\u4e0a\u4f20\uff01')}>\n        \u4e0a\u4f20\u56fe\u7247\n      &lt;\/button>\n    &lt;\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-63.png\"><img loading=\"lazy\" decoding=\"async\" width=\"524\" height=\"89\" src=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-63.png\" alt=\"\" class=\"wp-image-1238\" srcset=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-63.png 524w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-63-300x51.png 300w\" sizes=\"(max-width: 524px) 100vw, 524px\" \/><\/a><\/figure>\n\n\n\n<p>If you click on either button, its <code>onClick<\/code> will run first, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>followed<\/strong><\/mark>\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u8ddf\u7740<\/mark><\/strong>\uff09 by the parent <code>&lt;div><\/code>\u2019s <code>onClick<\/code>. So two messages will appear. If you click the toolbar itself, only the parent <code>&lt;div><\/code>\u2019s <code>onClick<\/code> will run.\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5982\u679c\u4f60\u70b9\u51fb\u4efb\u4e00\u6309\u94ae\uff0c\u5b83\u81ea\u8eab\u7684 <code>onClick<\/code> \u5c06\u9996\u5148\u6267\u884c\uff0c\u7136\u540e\u7236\u7ea7 <code>&lt;div><\/code> \u7684 <code>onClick<\/code> \u4f1a\u63a5\u7740\u6267\u884c\u3002\u56e0\u6b64\u4f1a\u51fa\u73b0\u4e24\u6761\u6d88\u606f\u3002\u5982\u679c\u4f60\u70b9\u51fb toolbar \u672c\u8eab\uff0c\u5c06\u53ea\u6709\u7236\u7ea7 <code>&lt;div><\/code> \u7684 <code>onClick<\/code> \u4f1a\u6267\u884c\u3002<\/mark>\uff09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pitfall<\/h3>\n\n\n\n<p>All events propagate in React except <code>onScroll<\/code>, which only works on the JSX tag you attach it to.\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5728 React \u4e2d\u6240\u6709\u4e8b\u4ef6\u90fd\u4f1a\u4f20\u64ad\uff0c\u9664\u4e86 <code>onScroll<\/code>\uff0c\u5b83\u4ec5\u9002\u7528\u4e8e\u4f60\u9644\u52a0\u5230\u7684 JSX \u6807\u7b7e\u3002<\/mark><\/strong>\uff09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"stopping-propagation\">Stopping propagation\u00a0\uff08\u963b\u6b62\u4e8b\u4ef6\u4f20\u64ad\uff09<\/h3>\n\n\n\n<p>Event handlers receive an <strong>event object<\/strong> as their only argument. By convention, it\u2019s usually called <code>e<\/code>, which <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">stands for<\/mark> \u201cevent\u201d. You can use this object to read information about the event.<br><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><strong><em>stands for \u4ee3\u8868\uff1b\u652f\u6301\uff1b<\/em><\/strong><\/mark><\/p>\n\n\n\n<p>That event object also lets you stop the propagation. If you want to prevent an event from reaching parent components, you need to call <code>e.stopPropagation()<\/code> like this <code>Button<\/code> component does:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Button({ onClick, children }) {\n  return (\n    &lt;button onClick={e => {\n      e.stopPropagation();\n      onClick();\n    }}>\n      {children}\n    &lt;\/button>\n  );\n}\n\nexport default function Toolbar() {\n  return (\n    &lt;div className=\"Toolbar\" onClick={() => {\n      alert('\u4f60\u70b9\u51fb\u4e86 toolbar \uff01');\n    }}>\n      &lt;Button onClick={() => alert('\u6b63\u5728\u64ad\u653e\uff01')}>\n        \u64ad\u653e\u7535\u5f71\n      &lt;\/Button>\n      &lt;Button onClick={() => alert('\u6b63\u5728\u4e0a\u4f20\uff01')}>\n        \u4e0a\u4f20\u56fe\u7247\n      &lt;\/Button>\n    &lt;\/div>\n  );\n}<\/code><\/pre>\n\n\n\n<p>When you click on a button:<\/p>\n\n\n\n<ol>\n<li>React calls the\u00a0<code>onClick<\/code>\u00a0handler passed to\u00a0<code>&lt;button><\/code>.<\/li>\n\n\n\n<li>That handler, defined in\u00a0<code>Button<\/code>, does the following:\n<ul>\n<li>Calls\u00a0<code>e.stopPropagation()<\/code>, preventing the event from bubbling further\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u963b\u6b62\u4e8b\u4ef6\u8fdb\u4e00\u6b65\u5192\u6ce1\u3002<\/mark><\/strong>\uff09.<\/li>\n\n\n\n<li>Calls the\u00a0<code>onClick<\/code>\u00a0function, which is a prop <strong><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">passed from<\/mark><\/em><\/strong> the\u00a0<code>Toolbar<\/code>\u00a0component\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u8c03\u7528\u00a0<code>onClick<\/code>\u00a0\u51fd\u6570\uff0c\u5b83\u662f\u4ece\u00a0<code>Toolbar<\/code>\u00a0\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684 prop\u3002<\/mark><\/strong>\uff09.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>That function, defined in the\u00a0<code>Toolbar<\/code>\u00a0component, displays the button\u2019s own alert.<\/li>\n\n\n\n<li>Since the propagation was stopped, the parent\u00a0<code>&lt;div><\/code>\u2019s\u00a0<code>onClick<\/code>\u00a0handler does\u00a0<em>not<\/em>\u00a0run.<\/li>\n<\/ol>\n\n\n\n<p>As a result of <code>e.stopPropagation()<\/code>, clicking on the buttons now only shows a single alert (from the <code>&lt;button><\/code>) <strong><em><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">rather than<\/mark><\/em><\/strong> the two of them (from the <code>&lt;button><\/code> and the parent toolbar <code>&lt;div><\/code>). Clicking a button is not the same thing as clicking the surrounding toolbar, so stopping the propagation makes sense for this UI.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-64.png\"><img loading=\"lazy\" decoding=\"async\" width=\"829\" height=\"614\" src=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-64.png\" alt=\"\" class=\"wp-image-1239\" srcset=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-64.png 829w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-64-300x222.png 300w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-64-768x569.png 768w\" sizes=\"(max-width: 829px) 100vw, 829px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"passing-handlers-as-alternative-to-propagation\">Passing handlers as alternative to propagation\u00a0<a href=\"https:\/\/react.dev\/learn\/responding-to-events#passing-handlers-as-alternative-to-propagation\"><\/a>\uff08&#8221;\u4f20\u9012\u5904\u7406\u51fd\u6570&#8221;\u4f5c\u4e3a&#8221;\u4e8b\u4ef6\u4f20\u64ad&#8221;\u7684\u66ff\u4ee3\u65b9\u6848\uff09<\/h3>\n\n\n\n<p>Notice how this click handler runs a line of code <em>and then<\/em> calls the <code>onClick<\/code> prop passed by the parent\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u6ce8\u610f\uff0c\u6b64\u5904\u7684\u70b9\u51fb\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u5148\u6267\u884c\u4e86\u4e00\u884c\u4ee3\u7801\uff0c<strong>\u7136\u540e<\/strong>\u8c03\u7528\u4e86\u7236\u7ec4\u4ef6\u4f20\u9012\u7684 <code>onClick<\/code> prop<\/mark>\uff09:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function Button({ onClick, children }) {\n  return (\n    &lt;button onClick={e => {\n      e.stopPropagation();\n      onClick();\n    }}>\n      {children}\n    &lt;\/button>\n  );\n}<\/code><\/pre>\n\n\n\n<p>You could add more code to this handler before calling the parent <code>onClick<\/code> event handler, too. This pattern provides an <em>alternative<\/em> to propagation. It lets the child component handle the event, while also letting the parent component specify some additional behavior. Unlike propagation, it\u2019s not automatic. But the benefit of this pattern is that you can clearly follow the whole chain of code that executes as a result of some event.\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u4f60\u4e5f\u53ef\u4ee5\u5728\u8c03\u7528\u7236\u5143\u7d20 <code>onClick<\/code> \u51fd\u6570\u4e4b\u524d\uff0c\u5411\u8fd9\u4e2a\u5904\u7406\u51fd\u6570\u6dfb\u52a0\u66f4\u591a\u4ee3\u7801\u3002\u6b64\u6a21\u5f0f\u662f\u4e8b\u4ef6\u4f20\u64ad\u7684\u53e6\u4e00\u79cd <strong>\u66ff\u4ee3\u65b9\u6848<\/strong> \u3002\u5b83\u8ba9\u5b50\u7ec4\u4ef6\u5904\u7406\u4e8b\u4ef6\uff0c\u540c\u65f6\u4e5f\u8ba9\u7236\u7ec4\u4ef6\u6307\u5b9a\u4e00\u4e9b\u989d\u5916\u7684\u884c\u4e3a\u3002\u4e0e\u4e8b\u4ef6\u4f20\u64ad\u4e0d\u540c\uff0c\u5b83\u5e76\u975e\u81ea\u52a8\u3002\u4f46\u4f7f\u7528\u8fd9\u79cd\u6a21\u5f0f\u7684\u597d\u5904\u662f\u4f60\u53ef\u4ee5\u6e05\u695a\u5730\u8ffd\u8e2a\u56e0\u67d0\u4e2a\u4e8b\u4ef6\u7684\u89e6\u53d1\u800c\u6267\u884c\u7684\u6574\u6761\u4ee3\u7801\u94fe\u3002<\/mark>\uff09<\/p>\n\n\n\n<p>If you rely on propagation and it\u2019s difficult to trace which handlers execute and why, try this approach instead.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"preventing-default-behavior\">Preventing default behavior\u00a0\uff08\u963b\u6b62\u9ed8\u8ba4\u884c\u4e3a\uff09<\/h3>\n\n\n\n<p>Some browser events have default behavior associated with them\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u67d0\u4e9b\u6d4f\u89c8\u5668\u4e8b\u4ef6\u5177\u6709\u4e0e\u4e8b\u4ef6\u76f8\u5173\u8054\u7684\u9ed8\u8ba4\u884c\u4e3a\u3002<\/mark>\uff09. For example, a <code>&lt;form><\/code> submit event, which happens when a button inside of it is clicked, will reload the whole page by default:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function Signup() {\n  return (\n    &lt;form onSubmit={() => alert('\u63d0\u4ea4\u8868\u5355\uff01')}>\n      &lt;input \/>\n      &lt;button>\u53d1\u9001&lt;\/button>\n    &lt;\/form>\n  );\n}<\/code><\/pre>\n\n\n\n<p>You can call <code>e.preventDefault()<\/code> on the event object to stop this from happening:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function Signup() {\n  return (\n    &lt;form onSubmit={e => {\n      e.preventDefault();\n      alert('Submitting!');\n    }}>\n      &lt;input \/>\n      &lt;button>Send&lt;\/button>\n    &lt;\/form>\n  );\n}<\/code><\/pre>\n\n\n\n<p>Don\u2019t confuse <code>e.stopPropagation()<\/code> and <code>e.preventDefault()<\/code>. They are both useful, but are unrelated:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Event\/stopPropagation\" target=\"_blank\" rel=\"noreferrer noopener\"><code>e.stopPropagation()<\/code><\/a>\u00a0stops the event handlers attached to the tags above from firing.<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/docs\/Web\/API\/Event\/preventDefault\" target=\"_blank\" rel=\"noreferrer noopener\"><code>e.preventDefault()<\/code>\u00a0<\/a>prevents the default browser behavior for the few events that have it.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"can-event-handlers-have-side-effects\">Can event handlers have <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">side effects<\/mark>?\u00a0<a href=\"https:\/\/react.dev\/learn\/responding-to-events#can-event-handlers-have-side-effects\"><\/a>\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u53ef\u4ee5\u5305\u542b<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">\u526f\u4f5c\u7528<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5417\uff1f<\/mark>\uff09<\/h2>\n\n\n\n<p>Absolutely! Event handlers are the best place for <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">side effects<\/mark>.<\/p>\n\n\n\n<p>Unlike rendering functions, event handlers don\u2019t need to be <a href=\"https:\/\/react.dev\/learn\/keeping-components-pure\">pure<\/a>, so it\u2019s a great place to <em>change<\/em> something\u2014for example, <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">change an input\u2019s value in response to typing\uff08\u66f4\u6539\u8f93\u5165\u6846\u7684\u503c\u4ee5\u54cd\u5e94\u952e\u5165\uff09<\/mark>, or change a list in response to a button press. However, in order to change some information, you first need some way to store it. <strong>In React, this is done by using <a href=\"https:\/\/react.dev\/learn\/state-a-components-memory\">state<\/a><\/strong><a href=\"https:\/\/react.dev\/learn\/state-a-components-memory\">,  a component\u2019s memory.<\/a> You will learn all about it on the next page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"recap\">Recap<a href=\"https:\/\/react.dev\/learn\/responding-to-events#recap\"><\/a>\uff08\u6458\u8981\uff09<\/h2>\n\n\n\n<ul>\n<li>You can handle events by passing a function as a prop to an element like\u00a0<code>&lt;button><\/code>.<\/li>\n\n\n\n<li>Event handlers must be passed,\u00a0<strong>not called!<\/strong>\u00a0<code>onClick={handleClick}<\/code>, not\u00a0<code>onClick={handleClick()}<\/code>.<\/li>\n\n\n\n<li>You can define an event handler function separately or inline.<\/li>\n\n\n\n<li>Event handlers are defined inside a component, so they can access props.<\/li>\n\n\n\n<li>You can declare an event handler in a parent and pass it as a prop to a child.<\/li>\n\n\n\n<li>You can define your own event handler props with application-specific names.<\/li>\n\n\n\n<li>Events propagate upwards. Call\u00a0<code>e.stopPropagation()<\/code>\u00a0on the first argument to prevent that.<\/li>\n\n\n\n<li>Events may have unwanted default browser behavior. Call\u00a0<code>e.preventDefault()<\/code>\u00a0to prevent that.<\/li>\n\n\n\n<li>Explicitly calling an event handler prop from a child handler is a good alternative to propagation.<\/li>\n<\/ul>\n\n\n\n<ul>\n<li>\u4f60\u53ef\u4ee5\u901a\u8fc7\u5c06\u51fd\u6570\u4f5c\u4e3a prop \u4f20\u9012\u7ed9\u5143\u7d20\u5982\u00a0<code>&lt;button><\/code>\u00a0\u6765\u5904\u7406\u4e8b\u4ef6\u3002<\/li>\n\n\n\n<li>\u5fc5\u987b\u4f20\u9012\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c<strong>\u800c\u975e\u51fd\u6570\u8c03\u7528\uff01<\/strong>\u00a0<code>onClick={handleClick}<\/code>\u00a0\uff0c\u4e0d\u662f\u00a0<code>onClick={handleClick()}<\/code>\u3002<\/li>\n\n\n\n<li>\u4f60\u53ef\u4ee5\u5355\u72ec\u6216\u8005\u5185\u8054\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u3002<\/li>\n\n\n\n<li>\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u5728\u7ec4\u4ef6\u5185\u90e8\u5b9a\u4e49\uff0c\u6240\u4ee5\u5b83\u4eec\u53ef\u4ee5\u8bbf\u95ee props\u3002<\/li>\n\n\n\n<li>\u4f60\u53ef\u4ee5\u5728\u7236\u7ec4\u4ef6\u4e2d\u5b9a\u4e49\u4e00\u4e2a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u5e76\u5c06\u5176\u4f5c\u4e3a prop \u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u3002<\/li>\n\n\n\n<li>\u4f60\u53ef\u4ee5\u6839\u636e\u7279\u5b9a\u4e8e\u5e94\u7528\u7a0b\u5e8f\u7684\u540d\u79f0\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u7684 prop\u3002<\/li>\n\n\n\n<li>\u4e8b\u4ef6\u4f1a\u5411\u4e0a\u4f20\u64ad\u3002\u901a\u8fc7\u4e8b\u4ef6\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u8c03\u7528\u00a0<code>e.stopPropagation()<\/code>\u00a0\u6765\u9632\u6b62\u8fd9\u79cd\u60c5\u51b5\u3002<\/li>\n\n\n\n<li>\u4e8b\u4ef6\u53ef\u80fd\u5177\u6709\u4e0d\u9700\u8981\u7684\u6d4f\u89c8\u5668\u9ed8\u8ba4\u884c\u4e3a\u3002\u8c03\u7528\u00a0<code>e.preventDefault()<\/code>\u00a0\u6765\u963b\u6b62\u8fd9\u79cd\u60c5\u51b5\u3002<\/li>\n\n\n\n<li>\u4ece\u5b50\u7ec4\u4ef6\u663e\u5f0f\u8c03\u7528\u4e8b\u4ef6\u5904\u7406\u51fd\u6570 prop \u662f\u4e8b\u4ef6\u4f20\u64ad\u7684\u53e6\u4e00\u79cd\u4f18\u79c0\u66ff\u4ee3\u65b9\u6848\u3002<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>\u53c2\uff1a<a href=\"https:\/\/zh-hans.react.dev\/learn\/responding-to-events\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/zh-hans.react.dev\/learn\/responding-to-events<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React lets you add event handlers to your JSX. Event ha&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[56],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responding to Events - \u7801\u5148\u751f\u7684\u535a\u5ba2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responding to Events - \u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"og:description\" content=\"React lets you add event handlers to your JSX. Event ha...\" \/>\n<meta property=\"og:url\" content=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-27T18:39:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-28T05:42:10+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/07\/react-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"\u7801\u5148\u751f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/mrcode2021\" \/>\n<meta name=\"twitter:site\" content=\"@mrcode2021\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u7801\u5148\u751f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/\"},\"author\":{\"name\":\"\u7801\u5148\u751f\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"headline\":\"Responding to Events\",\"datePublished\":\"2024-07-27T18:39:24+00:00\",\"dateModified\":\"2024-07-28T05:42:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/\"},\"wordCount\":1615,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"keywords\":[\"react\"],\"articleSection\":[\"\u524d\u7aef\u6280\u672f\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/\",\"url\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/\",\"name\":\"Responding to Events - \u7801\u5148\u751f\u7684\u535a\u5ba2\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/#website\"},\"datePublished\":\"2024-07-27T18:39:24+00:00\",\"dateModified\":\"2024-07-28T05:42:10+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"http:\/\/codermr.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responding to Events\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/codermr.com\/#website\",\"url\":\"http:\/\/codermr.com\/\",\"name\":\"\u7801\u5148\u751f\u7684\u535a\u5ba2\",\"description\":\"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP\",\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/codermr.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\",\"name\":\"\u7801\u5148\u751f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"contentUrl\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"width\":400,\"height\":400,\"caption\":\"\u7801\u5148\u751f\"},\"logo\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/codermr.com\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021\"],\"url\":\"http:\/\/codermr.com\/index.php\/author\/coderma\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responding to Events - \u7801\u5148\u751f\u7684\u535a\u5ba2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/","og_locale":"zh_CN","og_type":"article","og_title":"Responding to Events - \u7801\u5148\u751f\u7684\u535a\u5ba2","og_description":"React lets you add event handlers to your JSX. Event ha...","og_url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/","og_site_name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","article_published_time":"2024-07-27T18:39:24+00:00","article_modified_time":"2024-07-28T05:42:10+00:00","og_image":[{"width":900,"height":675,"url":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/07\/react-logo.png","type":"image\/png"}],"author":"\u7801\u5148\u751f","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/mrcode2021","twitter_site":"@mrcode2021","twitter_misc":{"\u4f5c\u8005":"\u7801\u5148\u751f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"13 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#article","isPartOf":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/"},"author":{"name":"\u7801\u5148\u751f","@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"headline":"Responding to Events","datePublished":"2024-07-27T18:39:24+00:00","dateModified":"2024-07-28T05:42:10+00:00","mainEntityOfPage":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/"},"wordCount":1615,"commentCount":0,"publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"keywords":["react"],"articleSection":["\u524d\u7aef\u6280\u672f"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/","url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/","name":"Responding to Events - \u7801\u5148\u751f\u7684\u535a\u5ba2","isPartOf":{"@id":"http:\/\/codermr.com\/#website"},"datePublished":"2024-07-27T18:39:24+00:00","dateModified":"2024-07-28T05:42:10+00:00","breadcrumb":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/responding-to-events\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"http:\/\/codermr.com\/"},{"@type":"ListItem","position":2,"name":"Responding to Events"}]},{"@type":"WebSite","@id":"http:\/\/codermr.com\/#website","url":"http:\/\/codermr.com\/","name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","description":"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP","publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/codermr.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf","name":"\u7801\u5148\u751f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/","url":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","contentUrl":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","width":400,"height":400,"caption":"\u7801\u5148\u751f"},"logo":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/codermr.com","https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021"],"url":"http:\/\/codermr.com\/index.php\/author\/coderma\/"}]}},"_links":{"self":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1224"}],"collection":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/comments?post=1224"}],"version-history":[{"count":7,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1224\/revisions"}],"predecessor-version":[{"id":1240,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1224\/revisions\/1240"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media\/1019"}],"wp:attachment":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media?parent=1224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/categories?post=1224"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/tags?post=1224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}