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

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