Сосредоточьтесь на TextInput из импортированного компонента

Question

У меня есть TextInput в моем компоненте (FirstComponent). Я могу назвать фокус на компоненте, вызвав this.refs, Я также импортирую и вызываю другой компонент (SecondComponent) которая также должна быть сосредоточена на TextInput по нажатию кнопки.

Мой первый компонент:

Import SecondComponent from './SecondComponent';

<View>
    <TouchableOpacity
        onPress={()=>this.refs.MyBox.focus()}  
    >
        <Text>Open</Text>
    </TouchableOpacity>


    <SecondComponent />


    <TextInput
      ref='MyBox'
      style={{width: '100%', borderColor: 'gray', borderWidth: 1}}
    />

</View>

SecondComponent тоже имеет TouchableOpacity сосредоточить внимание на TextInput:

<View>
    <TouchableOpacity
        onPress={()=>this.refs.MyBox.focus()}  
    >
        <Text>Open</Text>
    </TouchableOpacity>
</View>

Второй компонент отображается нормально, но не может вызвать фокус на TextInput так как его нет во втором компоненте. Как мне решить это?

Благодарю.

Answer 1

Вы можете либо передать ссылку на TextInput непосредственно:

<SecondComponent textInput={this.refs.MyBox} />

А потом в SecondComponent вызов this.props.textInput.focus()или вы можете передать функцию, которая выполняет фокусировку, и вызвать ее во втором компоненте:

focusOnTextInput = () => this.refs.MyBox.focus();

<View>
    <TouchableOpacity
        onPress={this.focusOnTextInput}>
    ...
    <SecondComponent onPress={this.focusOnTextInput}/>

А потом в SecondComponent:

onPress={this.props.onPress}

Answer 2

Ссылки на компонент не могут вызывать из другого компонента. В вашем случае вам нужно настроить метод в родительском компоненте, который должен сфокусировать компонент и сфокусировать его. И затем вы передаете этот метод в качестве подпорки дочерним компонентам.

focusMethod(component) {
 component.focus()
}

this.props.focusMethod(this.refs.MyBox);