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

IT技术 javascript reactjs ref
2021-04-28 17:58:27

正如本期所建议的，如果我想引用子组件，建议使用 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>
    )
  }
}

我想要的是访问 ref，也给Componentinput内部Field。那我们怎么做呢？

我尝试使用

  1. this.props.inputRef

  2. this.inputRef

但没有一个有效。请指导我解决这个问题。

2个回答

您可以传递一个将 ref 存储在父组件中的函数作为 prop。我用一个例子为你做了一个小提琴。

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>
    )
  }
}

将另一个引用分配给输入组件，将一个引用分配给字段组件。然后您可以访问子输入，例如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函数的两个地方都这样做。如果您没有任何其他逻辑，那么您可以在父级或子级中使用焦点命令

其它你可能感兴趣的问题
上一篇列表未对动态孩子排序 下一篇react JSX 组件并等待