30: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); }31:[] 2e:{"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"},{"id":289,"value":"toc = html`

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

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"handleEvent = {\n addList(\"handleEvent\", \"Handling events\", 2);\n return md`## Handling events`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof option1 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":42,"value":"viewof option2 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":33,"value":"utils = {\n addList(\"utils\", \"libs and methods required\", 7); \n return md`---\n## Utils`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable list = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"// toc = html`

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

` ","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":53,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {React, ReactDOM, htm, none_doc, hide_display} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}