Question

我有一个父组件和一个子组件，如下所示。

父组件：

constructor(){
    this.refs = React.createRef();
}

setRef(ref) {
    console.log(ref)
}

handleChange(e) {
    console.log(e)
}

render() {
    return(
        <ChildComponent ref={this.setRef} handleChange={this.handleChange.bind(this)}/>
    )
}

子组件：

render() {
    return(
        <input type="text" ref={this.props.ref} onChange={this.props.handleChange.bind(this)} > </input>
    )
}

要在父组件的ref函数内获取handleChange()值，我应该怎么做？预先感谢。

Answer 1

如果我阅读正确，您是否想从父组件中访问input元素？

您必须为prop使用另一个名称，因为ref是关键字prop，它将自动为组件分配给定的变量。

<ChildComponent inputRef={this.setRef} handleChange={this.handleChange.bind(this)}/>

class ChildComponent extends Component {
    render() {
        return(
            <input type="text" ref={this.props.inputRef} onChange= {this.props.handleChange.bind(this)} > </input>
        );
    }
}

根据您想要访问ref的方式，您可以直接将this.refs设置为prop或将其设置在setRef函数中。

// either `this.refs` and then usable through `this.refs.current`
<ChildComponent inputRef={this.refs} {...} />

// or `this.setRef` and assign it yourself
setRef = (ref) => {this.refs = ref;}

Answer 2

ref（以及key btw）是非常特殊的道具。 this.props.ref无法在子级中访问它。

最短的方法是使用不同的道具向前和向后传递ref：

class Parent ...
    render() {
    ...
        <Child inputRef={this.inputRef} />

class Child 
...
    render() {
        <input ref={this.props.inputRef} ...

最灵活，因为您可以在子组件内部访问不同的ref（例如inputRef + scrollableContainerRef + popupRef）

但是在某些情况下，您希望为现有代码库组成新的组件。说出<input>的替换。当然，在这种情况下，您将避免将所有<input ref={...} />更改为<MyInput refProp={...}>。

您可以在这里使用React.forwardRef。

之类的功能组件感觉最好

export Child = React.forwardRef((props, forwardedRef) => {
    ...
    return ...
        <input ref={forwardedRef} />
})

但是对于基于类的组件，您宁愿使用其他名称的ref-prop：

class Child
...
    render()
        return
        ...
        <input ref={this.props.forwardedRefName} />

export ChildWithForwardRef = React.forwardRef((props, ref) => <Child forwardedRefName={ref} {...props} />)

PS，因为您将消耗forwardRef返回的内容，而不是初始分量（Child），因此可能要为其指定displayName。这样，您以后可以在浏览器的React DevTools中使用酶的find()或易于识别的元素来找到它

Answer 3

ref仅适用于本机dom元素，要使ref适用于用户定义的组件，您需要这样做：

https://reactjs.org/docs/forwarding-refs.html

如何在ReactJS的父组件中获取子组件的引用

3 个答案: