Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2017年のformの話

 2017年のformの話

teppeis_sushi でした。てっぺーさん、おめでとう。

Yosuke Furukawa

July 05, 2017
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Uncontrolled form // React ͩͱ͜͏ class NameForm extends React.Component {

    // … handleSubmit(event) { alert('A name was submitted: ' + this.input.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); } }
  2. Controlled form class NameForm extends React.Component { // … handleChange(event)

    { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleCha </label> <input type="submit" value="Submit" /> </form> ); } }
  3. Uncontrolled vs Controlled • Controlled ͳํ͸ ͜͜Ͱ͸ React ͷ state

    ͱ ͯ͠؅ཧ͢Δ • Uncontrolled ͳํ͸DOMʹ͚ͩ؅ཧͤ͞Δ
  4. Uncontrolled vs Controlled • Facebook ͕ਪ঑ͯ͠Δͷ͸ Controlled Ұ୒ • React

    ͷ v-dom ߋ৽ͷλΠϛϯάͱ΋߹Θͤͯ React ͕࠷దԽͨ͠ํ๏ͰDOMʹ൓өͤ͞Δ͜ͱ ͕Ͱ͖Δ • ͪΐͬͱڽͬͨformΛ࡞Ε͹େମControlledͰ࣮ ૷͢Δඞཁ͕ग़ͯ͘Δɻ
  5. Uncontrolled vs Controlled • jQuery UI Έ͍ͨͳϥΠϒϥϦ͸େମ Uncontrolled ͳํ๏Ͱ΍ͬͯΔ͜ͱ͕ଟ͍ʢؾ ͕͢Δʣ

    • طଘͷࢿ࢈͕jQueryʹ͋ͬͯͦΕ͕ Uncontrolled ͳํ๏Ͱ࣮ݱ͞ΕͯΔͳΒ࢖͏ͷ ΋ྑ͍͕ɺجຊ͸ Controlled Ͱྑ͍ؾ͕͢Δɻɹ
  6. ·ͱΊ • 2017೥ݱࡏɺ Controlled form ͕ओྲྀ • ͨͩ͠ɺControll ͢Δ state

    ͸Ͳ͜Ͱ΍Δ͔ఆ·ͬͯ ͳ͍ • ஌ݟతʹ͸ Redux ʹ؅ཧ͢ΔͰྑͦ͞͏ɻ • ύϑΥʔϚϯε্ͷ໰୊͕͋ͬͨ࣌ʹReactͰ؅ཧ͕ ྑͦ͞͏ɻ