如何通过react中的包装类公开内部组件的函数

Question

我使用的是@shoutem/ui库，该库有自己的用于react native的TextInput实现。

https://github.com/shoutem/ui/blob/develop/components/TextInput.js

我正试图将重点放在键盘上的下一个输入上，下一个按钮按下，就像一样

React Native：如何在按下"键后选择下一个TextInput；下一个"；键盘按钮？

然而，Shoutem/ui的实现没有为TextInput公开一个我可以从引用中使用的focus()方法。

如何在外部类中将TextInput的焦点方法作为属性公开？

import React, { Component } from 'react';
import { TextInput as RNTextInput } from 'react-native';
import { connectStyle } from '@shoutem/theme';
import { connectAnimation } from '@shoutem/animation';
class TextInput extends Component {
focus() {
// how do I expose the react native text input focus method from this class?  
// do I get a reference to the text input component somehow?
}
render() {
const { props } = this;
const style = {
...props.style,
};
delete style.placeholderTextColor;
delete style.selectionColor;
return (
<RNTextInput
{...props}
style={style}
placeholderTextColor={props.style.placeholderTextColor}
selectionColor={props.style.selectionColor}
/>
);
}
}
TextInput.propTypes = {
...RNTextInput.propTypes,
style: React.PropTypes.object,
};
const AnimatedTextInput = connectAnimation(TextInput);
const StyledTextInput = connectStyle('shoutem.ui.TextInput')(AnimatedTextInput);
export {
StyledTextInput as TextInput,
};

Answer 1

您可以使用refs。

focus() {
this.rnInput.focus();
}
render() {
const { props } = this;
const style = {
...props.style,
};
delete style.placeholderTextColor;
delete style.selectionColor;
return (
<RNTextInput
{...props}
ref={input => this.rnInput = input}
style={style}
placeholderTextColor={props.style.placeholderTextColor}
selectionColor={props.style.selectionColor}
/>
);
}

一点解释。ref回调是在组件完成渲染后执行的，然后您就有了该组件当前实例的引用，您可以将其保存在变量中，以便以后使用ref={input => this.rnInput = input}。现在可以使用this.rnInput来调用focus方法。