Modo più semplice per modificare l'attenzione sui componenti figlio in React

Question

Sto cercando di capire un modo più semplice per utilizzare i tasti freccia per spostare l'attivazione su e giù in un elenco di input utilizzando React. L'elenco è il componente principale, l'input i bambini. Per capire quale input dovrebbe essere messo a fuoco in seguito, fornisco a ogni bambino un ref e un numero numerico id che uso per tenere traccia dell'ordine. Quando viene rilevato un tasto freccia, il callback trova il bambino con il ref corretto e entra in quello refs di quel bambino per prendere l'input e focalizzarlo.

Sono nuovo a React, mi sento abbastanza sporco, quindi mi chiedo se c'è una soluzione più pulita.

Codice e jsfiddle di lavoro:

var Child = React.createClass({ 
    handleUp: function(e) { 
     switch(e.key) { 
      case "ArrowDown": 
       this.props.handleFocus(this.props.id+1); 
      break; 
      case "ArrowUp": 
       this.props.handleFocus(this.props.id-1);    
      break; 
     } 
    }, 
    render: function() { 
     return <div><input defaultValue={this.props.name} onKeyUp={this.handleUp} ref="input" /></div>; 
    } 
}); 

var Parent = React.createClass({ 
    handleFocus: function(id) { 
     var child = this.refs['child' + id]; 
     if (!child) return; 
     var input = child.refs.input; 
     input.getDOMNode().focus(); 
    }, 
    render: function() { 
     var inputs = []; 
     for (var i=0; i<10; i++) { 
      inputs.push(<Child key={i} id={i} name={"value" + i} handleFocus={this.handleFocus} ref={'child' + i} />); 
     } 
     return <div> 
      {inputs} 
     </div>; 
    } 
}); 

http://jsfiddle.net/69z2wepo/509/

Answer 1

Ci sono alcuni modi per fare questo, ma nessuno è in realtà 'migliore' di questo.

Le alternative utilizzerebbero un mixin, ma questo porta il costo mentale dell'astrazione della scatola nera per poco guadagno. Lo terrei così com'è.