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

我正在使用@shoutem/ui库，它为react native提供了自己的TextInput实现

我试着把焦点放在键盘上的下一个输入上，下一个按钮就是这样按下

但是，Shoutem/ui的实现没有为我可以从引用中使用的TextInput公开focus（）方法

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

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

import React，{Component}来自'React'；
从“react native”导入{TextInput as RNTextInput}；
从'@shoutem/theme'导入{connectStyle}；
从'@shoutem/animation'导入{connectAnimation}；
类TextInput扩展组件{
焦点（）{
//如何从此类中公开react原生文本输入焦点方法？
//我是否以某种方式获得对文本输入组件的引用？
}
render（）{
const{props}=this；
常量样式={
…道具风格，
};
删除style.placeholderTextColor；
删除style.selectionColor；
返回(
);
}
}
TextInput.propTypes={
…RNTextInput.propTypes，
样式：React.PropTypes.object，
};
const animatedtemput=连接动画（TextInput）；
const styledtdemiput=connectStyle（'shoutem.ui.TextInput'）（animateddemiput）；
出口{
STYLEDTPUT作为文本输入，
};

您可以使用

focus（）{
这个.rnInput.focus（）；
}
render（）{
const{props}=this；
常量样式={
…道具风格，
};
删除style.placeholderTextColor；
删除style.selectionColor；
返回(
this.rnInput=input}
style={style}
Placeholder TextColor={props.style.Placeholder TextColor}
selectionColor={props.style.selectionColor}
/>
);
}

---

一点解释。ref回调在组件完成渲染后执行，然后您可以将该组件的当前实例的引用保存在变量中，供后面使用

ref={input=>this.rnInput=input}

。现在，您可以使用

this.rnInput

调用

focus

方法。

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