在 React 中改变对子组件的关注的更简洁的方法

Question

我正在尝试找出一种更简洁的方法来使用箭头键在使用 React 的输入列表中上下移动焦点。列表是父组件，输入是子组件。为了弄清楚接下来应该关注什么输入，我给每个孩子一个ref 以及一个我用来跟踪排序的数字id。当检测到箭头键时，回调会找到具有正确ref 的孩子并进入该孩子的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，但这会带来黑盒抽象的心理成本，而收益甚微。我会保持原样。