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

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

ymrl
April 08, 2016

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

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Λ࠶ద༻