1

我的组件中有一个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>

TextInputSecondComponent 渲染得很好，但由于它不在 SecondComponent 中，所以无法调用焦点。我该如何解决这个问题？

谢谢。

4

2 回答 2

1

您可以直接将引用传递给TextInput：

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

然后在SecondComponentcallthis.props.textInput.focus()中，或者您可以传入执行聚焦的函数并在第二个组件中调用它：

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

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

然后在SecondComponent：

onPress={this.props.onPress}
于 2017-09-09T19:59:41.180 回答
1

组件的引用不能从另一个组件调用。在您的情况下，您需要在父组件中设置方法，该方法需要一个组件需要关注，并关注它。然后将此方法作为道具传递给子组件。

focusMethod(component) {
 component.focus()
}

this.props.focusMethod(this.refs.MyBox);
于 2017-09-09T19:59:44.370 回答