Javascript 在功能组件中反应本机typeScript和forwardRef

我在react原生应用程序中，我也使用typeScript。 我有一个功能组件：

const Input: React.FunctionComponent<IInputProps> = ({
  inputStyle,
  placeHolderColor = EAppColors.DARK_GREY,
  placeHolder,
  value,
  onChangeText,
  autoFocus,
  onFocus,
  onBlur,
  onSubmitEditing,
  ref,
  keyboardType = EKeyboardType.DEFAULT,
}) => {
  return (
    <StyledInput
      testID="TextInputID"
      placeholderTextColor={placeHolderColor}
      placeholder={placeHolder}
    ...  

const输入：React.FunctionComponent=({
输入样式，
占位符颜色=EAppColors.深灰色，
占位符，
价值
一旦更改文本，
自动对焦，
聚焦，
安布尔，
在submitediting上，
裁判，
keyboardType=EKeyboardType.DEFAULT，
}) => {
返回(
this.setState（{focusOnFirstFields:false}）
showClearButton={showFirstClearButton}
值={firstName}
onClearText={（）=>this.onClearText（1）}
onChangeText={（值：字符串）=>
这是我的国家({
名字：value，
残疾人士:错,，
showFirstClearButton：正确，
})
}
onSubmitEditing={（）=>{
if（lastNameRef！==null&&lastNameRef.current！==null）{
lastNameRef.current.focus（）；
}
}}
keyboardType={EKeyboardType.DEFAULT}
/>

但是，当我想使用onSubmitEditing作为下一个输入的焦点时，我有以下错误：

我如何解决这个问题？

---

谢谢！

不是100%确定这里的问题是什么，但是

<StyledInput
  ref={ref}
  testID="TextInputID"
  placeholderTextColor={placeHolderColor}
  placeholder={placeHolder}
  ...

像这样：

const FancyButton = React.forwardRef</* type of ref*/HTMLButtonElement, /* component props */ComponentProps>((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>))


几个月前，我遇到了一个类似的问题。我通过以下方式解决了这个问题：

   import {TextInputProps, TextInput} from 'react-native';

   type IProps = TextInputProps & {
      labelText?: string;
    };
    
    const TextInputStd: React.FC<IProps> = React.forwardRef(
      (
        {
          labelText,
          ...textInputProps
        }: IProps,
        ref: React.Ref<TextInput>,
      ) => {
        const {styles} = useStyles(_styles);
    
        return (
          <>
            <View style={[styles.textInputContainer, styles2.textInputContainer]}>
              <Text style={styles.labelText}>{labelText || ''}</Text>
              <View style={styles.inputWrapper}>
                <TextInput style={styles.input} {...textInputProps} ref={ref} />
              </View>
            </View>
          </>
        );
      },
    );

从'react native'导入{TextInputProps，TextInput}；
输入IProps=TextInputProps&{
labelText？：字符串；
};
const TextInputStd:React.FC=React.forwardRef(
(
{
labelText，
…文本输入道具
}：IProps，
ref:React.ref，
) => {
const{styles}=useStyles（_styles）；
返回(
{labelText | |'''}
);
},
);

希望这能给你一个想法。
这能回答你的问题吗？谢谢@Fuze Mcsea，但没有：（注：我已经编辑了，我的问题会更清楚谢谢@jperl我已经编辑了，我的问题会更清楚error@E.D我在任何地方都看不到forwardRef。这就是错误告诉您的。@E.D我已经更新了我的答案。如果您需要进一步的帮助，请告诉我。我尝试了您的示例，但使用此代码时：
javascript常量输入：React.forwardRef=（{inputStyle，placeHolder color=EAppColors.DARK_GREY，占位符，值，onChangeText，自动对焦，onFocus，onBlur，onSubmitEditing，ref，keyboardType=EKeyboardType.DEFAULT，}）=>{return（…
我的道具有一些错误：绑定元素“占位符”隐式具有“any”类型，或者找不到名称“ref”。您需要删除“ref”，它传递了第二个道具，请查看示例。感谢您的回复@Fuze Mcsea，我以相同的方式通过一个先例回复解决了我的问题；）
const FancyButton = React.forwardRef</* type of ref*/HTMLButtonElement, /* component props */ComponentProps>((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>))


const FancyButton: React.ForwardRefExoticComponent<React.RefAttributes<HTMLButtonElement>>

const Input = React.forwardRef<TextInput, IInputProps>(({
  inputStyle,
  placeHolderColor = EAppColors.DARK_GREY,
  placeHolder,
  value,
  onChangeText,
  autoFocus,
  onFocus,
  onBlur,
  onSubmitEditing,
  keyboardType = EKeyboardType.DEFAULT,
}, ref /* <--- ref is passed here!!*/) => {
   // assuming this is a TextInput
  return (
    <StyledInput
      ref={ref}
      testID="TextInputID"
      placeholderTextColor={placeHolderColor}
      placeholder={placeHolder}
    ... 
}) 

   import {TextInputProps, TextInput} from 'react-native';

   type IProps = TextInputProps & {
      labelText?: string;
    };
    
    const TextInputStd: React.FC<IProps> = React.forwardRef(
      (
        {
          labelText,
          ...textInputProps
        }: IProps,
        ref: React.Ref<TextInput>,
      ) => {
        const {styles} = useStyles(_styles);
    
        return (
          <>
            <View style={[styles.textInputContainer, styles2.textInputContainer]}>
              <Text style={styles.labelText}>{labelText || ''}</Text>
              <View style={styles.inputWrapper}>
                <TextInput style={styles.input} {...textInputProps} ref={ref} />
              </View>
            </View>
          </>
        );
      },
    );