在React中改變對子組件的關注的更清潔的方法

Question

我正試圖找出一種更簡潔的方法來使用箭頭鍵在使用React的輸入列表中上下移動焦點。 列表是父組件，輸入子組件。 為了弄清楚接下來應該關注什么輸入，我給每個孩子一個ref以及我用來跟蹤排序的數字id 。 當檢測到箭頭鍵時，回調然后找到具有正確ref的子進入並且進入該子refs的refs以獲取輸入並給予焦點。

我是React的新手，感覺很臟，所以我想知道是否有更清潔的解決方案。

代碼和工作jsfiddle：

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

有幾種方法可以做到這一點，但沒有一種方法比這更好。

替代方案將使用mixin，但這會帶來黑盒抽象的心理成本，而收益微乎其微。 我只是保持原樣。