ReactJs：如何获取引用来自其父组件的组件的引用

Question

正如issue 中所建议的那样，如果我想引用子组件，建议使用 refs。

findDOMNode(childComponentStringRef)

class Field extends Component {
  componentDidMount() {
    // this.inputNode.focus(); // Basically I want to access the ref to input here as well
  }

  render() {
    return (
      <input type='text' ref={this.props.inputRef} />
    )
  }
}

class MyComponent extends Component {
  componentDidMount() {
    this.inputNode.focus();
  }

  render() {
    return (
      <div>
        Hello, <Field inputRef={node => this.inputNode = node} />
      </div>
    )
  }
}

我想要的是访问引用，在 Field 组件内也提供给 input。那么我们该怎么做呢？

我尝试过使用

1. this.props.inputRef

2. this.inputRef

但没有一个有效。请指导我。

Answer 1

您可以传递一个将 refs 存储在父组件中的函数作为 prop。我已经为你做了一个fiddle 的例子。

class Field extends Component {
  componentDidMount() {
    this.props.setChildRef('inputRef', this.inputRef);
    this.inputRef.focus(); // Basically I want to access the ref to         input here as well
  }

  render() {
    return (
      <input type='text' ref={ip=> this.inputRef= ip} />
    )
  }
};


class MyComponent extends Component {
  componentDidMount() {
    this.inputRef.focus();
  }

  setChildRef = (name, ref) => {
    this[name] = ref;
  }

  render() {
    return (
      <div>
        Hello, <Field setChildRef={this.setChildRef} ref={node => this.inputNode = node} />
      </div>
    )
  }
}

Answer 2

将另一个 ref 分配给 input 组件，并将一个 ref 分配给 Field 组件。然后您可以访问子输入，例如this.inputNode.inputRef.focus();

class Field extends Component {
  componentDidMount() {
    this.inputRef.focus(); 
  }

  render() {
    return (
      <input type='text' ref={ip=> this.inputRef= node} />
    )
  }
}

class MyComponent extends Component {
  componentDidMount() {
    this.inputNode.inputRef.focus(); 

  }

  render() {
    return (
      <div>
        Hello, <Field ref={node => this.inputNode = node} />
      </div>
    )
  }
}

但是你不需要在componentDidMount 函数的两个地方都这样做。如果您没有任何其他逻辑，那么您可以只在父级或子级中使用焦点命令