ReactJS将焦点设置为树形结构中的输入

Question

我有使用ReactJS的无限深树结构。 我的树由具有以下模型的节点组成：

const tree = {
  id:"x",
  name: "node 1",
  children : [
      {
        id:"y",
        name:"sub node 1",
        children : []
      }
  ....
}

我正在尝试使用refs将焦点设置为子元素之一内部的输入（请参阅https://reactjs.org/docs/refs-and-the-dom.html ）。 我使用其ID确定要关注的节点。

我的节点组件是：

class Node extends Component {

constructor(props) {
    super(props)
    this.setFocus = this.setFocus.bind(this)
}

setFocus(id) {
    if (this.props.node.id === id){
        this.inputWidget.focus()
        return true
    }
    for (var i = 0; i < this.subNodes.length; i++) {
        const t = this.subNodes[i]
        const result = t.setFocus(id)
        if (result) {
           return true
        }
    }
    return false
}

render() {
    const { node } = this.props
    const children = node.children

    // we store the component sub nodes so that we can iterate over them
    this.subNodes = []

    return (<div>
            <input type="text" ref={(input)=>{this.inputWidget = input}}
            {children.ma((n, index) =>
                <Node key={n.id} node={n}
                    ref={(main) => { this.subNodes.push(main) }} />
        </div>)
    }
}

export default Node

然后，从父组件中，我可以在整个树上触发setFocus（id）方法（也使用引用）。

是正确的方法还是有更简单/更有效的方法？ 这种方式产生的结果不一致。 尤其是一旦我更改了树结构（即添加一个新节点）。

Answer 1

您可以在componentDidMount方法focusCallback ids和focusCallback都注册到父组件。

 import React, { Component } from 'react'; import PropTypes from 'prop-types'; class Node extends Component { constructor(props) { super(props); this.setFocus = this.setFocus.bind(this); } static propTypes = { registerNode: PropTypes.func, } componentDidMount() { this.props.registerNode(this.props.node.id, () => { this.inputWidget.focus(); }); } render() { const { node, registerNode } = this.props const children = node.children return ( <div> <input type="text" ref={(input)=>{this.inputWidget = input}} {children.map((n) => <Node registerNode={registerNode} key={n.id} node={n} /> </div> ) } } export default Node 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

您的父组件应向您的子节点提供registerNode方法：

 class Head extends Component { nodes = {}; registerNode = (id, focusCallback) => { this.nodes[id] = callback; }; render() { const { tree } = this.props; return tree.map(node => <Node registerNode={this.registerNode} key={node.id} node={node} />); } } 

现在，您可以使用this.nodes[id]();将焦点设置为任何输入this.nodes[id]();

现在我们不再需要树遍历了，因为我们只使用带id的map。 因此，我们提高了运行速度，并且还删除了Node组件上的额外refs 。