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

気の利いた入力コンポーネント

41104bf685ee28d9c760ef29db690e5b?s=47 ymrl
April 08, 2016

 気の利いた入力コンポーネント

41104bf685ee28d9c760ef29db690e5b?s=128

ymrl

April 08, 2016
Tweet

Transcript

  1. ؾͷར͍ͨ
 ೖྗίϯϙʔωϯτͷ࿩ !ZNSM

  2. ͜ͷεϥΠυຕ
 ͋ΔͷͰۦ͚଍Ͱ αϯϓϧίʔυ͜͜ɿ
 IUUQTHJUIVCDPNZNSMJOQVUDPNQPOFOUFYBNQMFT

  3. ୭ w !ZNSMʢ΍·͋Δʣ w ࣾձਓྺ೥GSFFFྺ೥ w 6*Λߟ͑Δͷͱ$44ॻ͘ͷ͕޷͖

  4. ೖྗίϯϙʔωϯτ ʢ·͋ɺUFYUBSFBͱ͔͋Δ͚Ͳʣ

  5. څ༩ܭࢉGSFFFͷͱ͋Δը໘

  6. IUUQTXXXKSFBTUDPKQPUPOBEPDVNFOU@SFRVFTU

  7. IUUQTUXJUUFSDPNZNSMTUBUVT

  8. ආ͚ΒΕͳ͍িಥ w ։ൃऀࢹ఺ɿ͍ΖΜͳ౎߹͕͋ΜͶΜ w Ϣʔβʔࢹ఺ɿ։ൃऀͷ౎߹ͳΜͯ஌ΒΜ w Τϥʔ͕ग़ͯΠϥοͱͨ͘͠ͳ͍ w શ֯ͱ൒֯ͷ۠ผͳΜ͔ͯͭͳ͍ w

    ͦ΋ͦ΋Ͳ͏͍͏ܗࣜͰೖΕΔͷ͔Θ͔Βͳ͍
  9. ؾΛޮ͔͍ͤͨ w શ֯൒֯ͷม׵ͱ͔ϑϩϯτΤϯυͰ΍ͬͪΌ͑ w ॳΊͯͷϢʔβʔ͕໎ΘͣʹೖྗͰ͖Δ w ׳ΕͯΔϢʔβʔ͕ߴ଎ʹೖྗͰ͖Δ w ։ൃऀ͕΄͍͠ܗࣜΛ఻͑Δ͜ͱ΋Ͱ͖Δʢ͔΋ʣ w

    ͔࣍ΒͦͷܗࣜͰೖΕͯ΋Β͑Δʢ͔΋ʣ
  10. ؾΛར͔ͤͯΔྫ w શ֯ˠ൒͕֯૸ΔͷͰ*.&Φϯͷ··ೖྗ0, w ֹۚཝ͕Λ ʹͯ͘͠ΕΔ w ೔෇ཝ͕Λʹͯ͘͠ΕΔ w ࣌ࠁཝͰΛʹͯ͘͠ΕΔ

    w ༣ศ൪߸ཝͰϋΠϑϯ͕ࣗಈతʹิΘΕΔ
  11. ʢ͓͞Β͍ʣ3FBDUͷ
 ೖྗίϯϙʔωϯτ

  12. ͜Μͳײ͡ class NormalInput extends React.Component { handleChange(e) { const value

    = e.target.value; this.props.onChange(e, value); } render() { return( <input type="text" value={this.props.value} onChange={this.handleChange.bind(this)} /> ); } } ਌ίϯϙʔωϯτʹ
 มߋ಺༰Λ௨஌͢Δ ਌͕࢖͏͔΋͠Εͳ͍ͷͰ
 4ZOUIFUJD&WFOUΛୈҰҾ਺ʹͯ͠Δ
  13. ͔ͭ͏ <NormalInput type="text" value={ this.state.value } onChange={(_e, value)=>this.setState({ value: value

    })} />
  14. શ֯ӳ਺ʹม׵͢Δ handleChange(e) { const value = e.target.value.replace(/[!-~]/g, (chr) => String.fromCharCode(chr.charCodeAt(0)

    + 0xFEE0) ); this.props.onChange(e, value); } ൒֯จࣈ͕͋ͬͨΒม׵͢Δ
  15. ม׵͕૸ΔͱΧʔιϧ͕
 ͍ͪ͹ΜޙΖʹ͍͘໰୊

  16. ஋͕มΘΔͱ͖ʹ
 ΧʔιϧҐஔΛ໭ͯ͋͛͠Δ componentWillUpdate() { const element = ReactDOM.findDOMNode(this); this.selectionStart =

    element.selectionStart; this.selectionEnd = element.selectionEnd; } componentDidUpdate() { const element = ReactDOM.findDOMNode(this); if (element === document.activeElement) { element.setSelectionRange(this.selectionStart, this.selectionEnd); } } อ͓͍࣋ͯͨ͠ΧʔιϧҐஔΛ
 VQEBUFޙʹηοτ͢Δ VQEBUFલͷΧʔιϧҐஔΛอ͓࣋ͯ͘͠
  17. ͍͍ײ͡

  18. ͻΒ͕ͳΛ ΧλΧφʹ͢Δ

  19. handleChange(e) { const value = e.target.value.replace(/[ぁ-ゖ]/g, (chr) => String.fromCharCode(chr.charCodeAt(0) +

    0x60) ); this.props.onChange(e, value); }
  20. ͋΍͍͠ڍಈʹͳΔ

  21. ΧʔιϧҐஔͷ੍ޚ೉͍͠ w ೔ຊޠೖྗ͕བྷΉ৔߹ͷڍಈ͕͋΍͘͠ͳΔ w ม׵ޙʹจࣈ਺͕มΘΔ৔߹ʹΑ͘Θ͔Μͳ͘ͳΔ w ఘΊͱ͍ͨ΄͏͕ແ೉ w Χʔιϧ͕͋Δͱ͖͸ม׵͠ͳ͍Ͱ͓͘ w

    ΋ͬͱଞʹؤுΓ͍ͨ͜ͱ΋ͨ͘͞Μ͋Δ
  22. CMVSͰม׵͞ΕΔ

  23. class CoolKatakanaInput extends React.Component { constructor(props) { super(); this.state =

    { showValue: props.value }; } render() { return( <input type="text" value={this.state.showValue} onChange={this.handleChange.bind(this)} onBlur={this.handleBlur.bind(this)} /> ); } componentWillReceiveProps(props) { const element = ReactDOM.findDOMNode(this); if (element !== document.activeElement) { this.setState({ showValue: props.value}); } } ౉͞ΕͨQSPQTΛTUBUFʹίϐʔ දࣔʹ͸TUBUFͷ΄͏Λ࢖͏ ϑΥʔΧεͯ͠ͳ͍࣌ͷ
 QSPQTͷมԽ͸දࣔʹଈ࣌൓ө
  24. handleChange(e) { const inputValue = e.target.value; const value = inputValue.replace(/[ぁ-ゖ]/g,

    (chr) => String.fromCharCode(chr.charCodeAt(0) + 0x60) ); this.setState({ showValue: inputValue}); this.props.onChange(e, value); } handleBlur() { this.setState({ showValue: this.props.value}); } ฤूத͸ม׵ͤͣʹදࣔ ϑΥʔΧε͕֎Εͨͱ͖ʹQSPQTΛ࠶ద༻
  25. CMVSͰม׵͞ΕΔ

  26. ؾͷར͍ͨײ͡ʹ͢ΔͨΊʹ w Ͱ͖Δ͔͗Γػցతʹม׵͢Δʢ౰ͨΓલʣ w ೖྗϑΟʔϧυͷϥϕϧͰ΋ཉ͍͠ܗࣜΛ఻͑Δ w ࢯ໊ʢΧφʣʹΧλΧφͰೖΕͯ΄͍͠ؾ࣋ͪΛࠐΊΔ w αʔϏε಺Ͱೖྗܗࣜ͸౷Ұ͓ͯ͘͠ w

    ਺஋͸൒֯ɺಡΈԾ໊͸શ֯ΧλΧφͳͲ w Ͳ͏ͯ͠΋ม׵Ͱ͖ͳ͍৔߹ͳͲ͸ଈ࣌ʹڭ͑ͯ͋͛Δ w ૹ৴͔ͯ͠ΒʮΤϥʔͰ͢ʯͰ͸஗͗͢
  27. ͔ͤͬ͘ྑ͍αʔϏε࡞ͬͯΔͷͳΒ
 ࡉ͔͍ͱ͜Ζ΋ؾΛར͔͍͖͍ͤͯͨͰ͢Ͷ