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>

SecondComponent被渲染得很好，但是不能在TextInput上调用焦点，因为它不在SecondComponent中。我该如何解决这个问题？

感谢。

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

从导入的Component关注TextInput

2 个答案: