如何简化这个反应组分？

我有多个输入，并且我正在尝试在下一个输入达到最大长度时进行输入焦点。
这里是我的代码：如何简化这个反应组分？

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> 
    ) 
}

我不希望每个输入有不同的onChange事件处理程序。

我该如何简化这个问题，还是有更好的方法来实现我想要做的？

来源

2016-10-03 Dan

如果一切正常，这可能是更适合的代码审查姊妹网站 –

@SamiKuhmonen嘿指点出来的感谢。我甚至不知道它存在。 – Dan

快速简化并使其生效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> 
    ) 
    } 
});

来源

2016-10-03 07:52:14 dzv3

嘿，谢谢，但我想我不应该使用[ref string]（https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute）。是否有可能与ref回调做到这一点？ – Dan

当然，请检查此[jsBin]（https://jsbin.com/xaqekujela/1/edit?html,js输出）。 – dzv3

再次感谢您！ – Dan

一般化的事件处理程序：

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

附加实际的事件处理程序

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

您可能必须解决ref不是被立即设置。

来源

2016-10-03 07:43:20

如何简化这个反应组分？

回答

相关问题