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

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

Avatar for ymrl ymrl
April 08, 2016

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

Avatar for ymrl

ymrl

April 08, 2016
Tweet

More Decks by ymrl

Other Decks in Technology

Transcript

  1. ͜Μͳײ͡ 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ΛୈҰҾ਺ʹͯ͠Δ
  2. ஋͕มΘΔͱ͖ʹ
 ΧʔιϧҐஔΛ໭ͯ͋͛͠Δ 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લͷΧʔιϧҐஔΛอ͓࣋ͯ͘͠
  3. 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ͷมԽ͸දࣔʹଈ࣌൓ө
  4. 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Λ࠶ద༻