Czystszy sposób zmiany fokusu na elementach potomnych w React

Question

Próbuję znaleźć bardziej przejrzysty sposób użycia klawiszy strzałek, aby przenieść ostrość w górę iw dół na liście wejść za pomocą przycisku React. Lista jest składnikiem macierzystym, dane wejściowe dzieci. Aby dowiedzieć się, jakie dane wejściowe należy skoncentrować w następnej kolejności, daję każdemu dziecku numer ref, a także numeryczne id, którego używam do śledzenia zamawiania. Po wykryciu klawisza strzałki wywołanie zwrotne odnajdzie dziecko o poprawnej ref i przejdzie do refs tego dziecka, aby pobrać dane wejściowe i ustawić ostrość.

Jestem nowy w React, to jest dość brudne, więc zastanawiam się, czy istnieje czystsze rozwiązanie.

oznaczeniu i jsfiddle pracy:

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

Istnieje kilka sposobów, aby to zrobić, ale nikt tak naprawdę są 'lepsze' niż to.

Alternatywy użyłyby mixin, ale to przyniesie mentalny koszt abstrakcji czarnego pudełka za niewielki zysk. Po prostu zachowam to, jak jest.