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

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. ͔ͤͬ͘ྑ͍αʔϏε࡞ͬͯΔͷͳΒ
 ࡉ͔͍ͱ͜Ζ΋ؾΛར͔͍͖͍ͤͯͨͰ͢Ͷ