Как получить ссылку на дочерний компонент внутри родительского компонента в ReactJS

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

ref (а также key кстати) очень особенная опора.this.props.ref.

недоступно у ребенка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.Таким образом, вы сможете найти его позже, скажем, с помощью энзима find() или легко распознать элемент в браузере React DevTools

Answer 2

Если я правильно читаю, вы хотите получить доступ к элементу input из родительского компонента?

Вы должны использовать другое имя для вашего реквизита, поскольку ref - это ключевое слово реквизита, которое автоматически назначит компоненту заданную переменную.

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

В зависимости от того, как вы хотите получить доступ к реф, вы можете либо установить this.refs непосредственно на реквизит, либо установить его внутри вашей функции 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 3

ref работает только с собственным элементом dom, чтобы ссылка работала с определяемым пользователем компонентом, вам необходимо:

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