30:T471,{ const root = html`

`; class FlavorForm extends React.Component { constructor(props) { super(props); this.state = {value: 'coconut'}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { console.log('Your favorite flavor is: ' + this.state.value); event.preventDefault(); } render() { return jsx` `; } } ReactDOM.render( jsx`<${FlavorForm} />`, root ); return root; }31:T4aa,{ const root = html`

`; class Reservation extends React.Component { constructor(props) { super(props); this.state = { isGoing: true, numberOfGuests: 2 }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; const name = target.name; this.setState({ [name]: value }); } render() { return jsx` `; } } ReactDOM.render( jsx`<${Reservation} />`, root ); return root; }32:[] 2e:{"title":"Forms","cells":[{"id":0,"value":"md`# Forms\nhttps://reactjs.org/docs/forms.html\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"{\n const root = html`

`;\n \n class NameForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {value: ''};\n\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleChange(event) {\n this.setState({value: event.target.value.toUpperCase()}); // make input all capital letter\n }\n\n handleSubmit(event) {\n console.log('A name was submitted: ' + this.state.value);\n event.preventDefault(); // without it the page will be directed elsewhere, but no idea why\n }\n\n render() {\n return jsx`\n \n `;\n }\n }\n \n ReactDOM.render(\n jsx`<${NameForm} />`,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"{\n \n const root = html`

`;\n \n class EssayForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 'Please write an essay about your favorite DOM element.'\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleChange(event) {\n this.setState({value: event.target.value});\n }\n\n handleSubmit(event) {\n console.log('An essay was submitted: ' + this.state.value);\n event.preventDefault();\n }\n\n render() {\n return jsx`\n

\n \n Essay:\n

\n          </label>\n          <input type=\"submit\" value=\"Submit\" />\n        </form>\n      `;\n    }\n  }\n  \n  ReactDOM.render(\n    jsx`<${EssayForm} />`,\n    root\n  );\n  \n  return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`## select tag\nhttps://reactjs.org/docs/forms.html#the-select-tag`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"html`\n<select>\n  <option value=\"grapefruit\">Grapefruit</option>\n  <option value=\"lime\">Lime</option>\n  <option selected value=\"coconut\">Coconut</option>\n  <option value=\"mango\">Mango</option>\n</select>\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`## The  file input tag\nhttps://reactjs.org/docs/forms.html#the-file-input-tag`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"html`<input type=\"file\" />`","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"md `## handling-multiple-inputs\nhttps://reactjs.org/docs/forms.html#handling-multiple-inputs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"md`## controlled-input-null-value\nhttps://reactjs.org/docs/forms.html#controlled-input-null-value`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"{\n  const root = html`<div></div>`;\n  \n  ReactDOM.render(jsx`<input value=\"hi\" />`, root);\n\n  setTimeout(function() {\n    ReactDOM.render(jsx`<input value=${null} />`, root); // use null, make it editable; use \"world\" won't\n  }, 1000);\n\n  return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {React, ReactDOM, jsx } from \"@j-f1/react\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"import { htm, none_doc, hide_display} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}
</article></body></html>