この反応成分はどのように簡略化できますか？

Question

私は複数の入力を持っており、maxlengthに達すると入力フォーカスを次の入力にしようとしています。私は、各入力は異なるonChangeイベントハンドラを持っている必要はありません

handleTextChange1(e) { 
    const { value, maxLength } = e.target; 
    if (value.length === maxLength) { 
     ReactDOM.findDOMNode(this.nextComponent1).focus(); 
    } 
} 
handleTextChange2(e) { 
    const { value, maxLength } = e.target; 
    if (value.length === maxLength) { 
     ReactDOM.findDOMNode(this.nextComponent2).focus(); 
    } 
} 
render() { 
    return (
     <form onSubmit={this.handleSubmit.bind(this)}> 
      <input onChange={this.handleTextChange1.bind(this)} maxLength="4"/> 
      <input ref={c => this.nextComponent1=c} onChange={this.handleTextChange2.bind(this)} maxLength="4" /> 
      <input ref={c => this.nextComponent2=c} maxLength="4"/> 
     </form> 
    ) 
} 

：
はここに私のコードです。

私はこれを単純化することができますか、または私がしようとしていることを達成するためのより良い方法はありますか？あなたは周りのrefがすぐに設定されていない作品が必要になる場合があり、実際のイベントハンドラ

... onChange={this.focusWhenChangeHappened(this.component1)} ... 
... onChange={this.focusWhenChangeHappened(this.component2)} ... 

を取り付け

focusWhenChangeHappened(component) { 
    return function eventHandler(e) { 
    const { value, maxLength } = e.target; 
    if (value.length === maxLength) { 
     ReactDOM.findDOMNode(component).focus(); 
    } 
    } 
} 

：

Answer 1

簡単に簡略化し、DRYerにすると、次のコンポーネントを渡して、onChangeハンドラの引数としてフォーカスすることができます。

https://jsbin.com/cakujozoga/edit?html,js,output

var App = React.createClass({ 
    handleSubmit: function() {}, 

    handleTextChange: function(nextComponent, e) { 
    const { value, maxLength } = e.target; 
    if (value.length === maxLength) { 
     ReactDOM.findDOMNode(this.refs[nextComponent]).focus(); 
    } 
    }, 

    render: function() { 
    return (
     <form onSubmit={this.handleSubmit.bind(this)}> 
      <input onChange={this.handleTextChange.bind(this, "nextComponent1")} maxLength="4"/> 
      <input ref="nextComponent1" onChange={this.handleTextChange.bind(this, "nextComponent2")} maxLength="4" /> 
      <input ref="nextComponent2" maxLength="4"/> 
     </form> 
    ) 
    } 
}); 

Answer 2

はあなたのイベントハンドラを一般化します。