2c:null 2d:["$","title",null,{"children":"Handling Events | 深度碎片 | Observable"}] 32:T1321,{ const doc = md ` Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: - React events are named using camelCase, rather than lowercase. - With JSX you pass a function as the event handler, rather than a string. For example, the HTML: \`\`\`js \`\`\` is slightly different in React: \`\`\`js \`\`\` Another difference is that you cannot return \`false\` to prevent default behavior in React. You must call \`preventDefault\` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write: \`\`\`js Click me \`\`\` In React, this could instead be: \`\`\`js function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( Click me ); } \`\`\` Here, \`e\` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don’t need to worry about cross-browser compatibility. See the [\`SyntheticEvent\`](https://reactjs.org/docs/events.html) reference guide to learn more. When using React you should generally not need to call \`addEventListener\` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered. When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this \`Toggle\` component renders a button that lets the user toggle between “ON” and “OFF” states: \`\`\`js class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make \`this\` work in the callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(state => ({ isToggleOn: !state.isToggleOn })); } render() { return ( ); } } ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) You have to be careful about the meaning of \`this\` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind \`this.handleClick\` and pass it to \`onClick\`, \`this\` will be \`undefined\` when the function is actually called. This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without \`()\` after it, such as \`onClick={this.handleClick}\`, you should bind that method. If calling \`bind\` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks: \`\`\`js class LoggingButton extends React.Component { // This syntax ensures \`this\` is bound within handleClick. // Warning: this is *experimental* syntax. handleClick = () => { console.log('this is:', this); } render() { return ( ); } } \`\`\` This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app). If you aren’t using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback: \`\`\`js class LoggingButton extends React.Component { handleClick() { console.log('this is:', this); } render() { // This syntax ensures \`this\` is bound within handleClick return ( ); } } \`\`\` The problem with this syntax is that a different callback is created each time the \`LoggingButton\` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.`; return hide_display(option1, doc); }33:[] 30:{"id":"e847fa26b0b43e9b","slug":"handling-events","title":"Handling Events","thumbnail":"3b2d78bbe0d10f08b8a33c67db0a10d00f62b143b9eb744198cf018cedb5b248","access_level":"public","create_time":"$D2019-12-15T11:03:30.311Z","update_time":"$D2019-12-16T04:35:19.295Z","view_time":null,"first_public_time":"$D2019-12-15T11:11:56.662Z","has_unpublished_edits":null,"fork":{"id":"68dcad4a541ac7b0","slug":"state-and-lifecycle","title":"State and Lifecycle","owner":{"id":"7a6719735624fc09","login":"embracelife","name":"深度碎片"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a6719735624fc09","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":"starter_2024"},"version":362,"publish_version":362,"role":null,"authored":false,"authors":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null}],"members":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Handling Events","cells":[{"id":0,"value":"TOC = {\n\n addList(\"TOC\", \"table of content\", 1);\n \n return md`# Handling Events\nhttps://reactjs.org/docs/handling-events.html\n\n## Table of Content\n`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"toc = html`

\n ${d.id + \" =>\"}\n ${d.des}\n

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"handleEvent = {\n addList(\"handleEvent\", \"Handling events\", 2);\n return md`## Handling events`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof option1 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"problem = {\n const root = html`

`;\n \n class Toggle extends React.Component {\n constructor(props) {\n super(props);\n this.state = {isToggleOn: true};\n\n // This binding is necessary to make `this` work in the callback\n // this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n this.setState(state => ({\n isToggleOn: !state.isToggleOn\n }));\n\n }\n\n render() {\n return htm`\n \n `;\n }\n }\n\n ReactDOM.render(\n htm`<${Toggle} />`,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"passArgEvent = {\n addList(\"passArgEvent\", \"Passing Arguments to Event Handlers\", 3);\n return md`## Passing Arguments to Event Handlers`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof option2 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"{\n const doc = md`\n\nInside a loop it is common to want to pass an extra parameter to an event handler. For example, if \\`id\\` is the row ID, either of the following would work:\n\n\\`\\`\\`js\n\n\n\\`\\`\\`\n\nThe above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [\\`Function.prototype.bind\\`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.\n\nIn both cases, the \\`e\\` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with \\`bind\\` any further arguments are automatically forwarded.\n\n[Edit this page](https://github.com/reactjs/reactjs.org/tree/master/content/docs/handling-events.md)`;\n return hide_display(option2, doc)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"utils = {\n addList(\"utils\", \"libs and methods required\", 7); \n return md`---\n## Utils`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"mutable list = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"// toc = html`

\n// ${d.id + \" =>\"}\n// ${d.des}\n//

` ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"html`\n \n ${d3.schemeCategory10.map((color, i) => html`\n \n \n \n `)}\n

#	Color	Swatch
${i}	${color}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"function addList(id, des, idx) {\n let list = mutable list;\n // todo: make sure no replicate of id\n list.push({id: id, des: des, idx: idx});\n mutable list = list;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {React, ReactDOM, htm, none_doc, hide_display} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"