更改 onChangeText 后无法在输入字段中输入

Question

我有一个自定义 FieldInput 图标，我在其中使用 Native Base 的输入组件。我用它来验证 Formik。当我这样使用它时：

 onChangeText={handleChange(fieldType)}

一切似乎都正常，但我在 onChangeText 上收到一个错误

  Overload 1 of 2, '(props: Readonly<Input>): Input', gave the following error.
    Type 'void' is not assignable to type '((text: string) => void) | undefined'.

当我把它改成

 onChangeText={()=>handleChange(fieldType)}

错误消失了，但我的输入字段停止工作。我不能再输入它。我究竟做错了什么？我的组件如下所示：

type FieldInputProps = React.PropsWithRef<{
  handleChange: (e: string) => void;
  value: string;
  fieldType: string;
  placeholderText?: string;
  style?: object;
  rounded?: boolean;
}>;


export const FieldInput = React.forwardRef<Input, FieldInputProps>(({
  handleChange,
  fieldType,
  placeholderText,
  value,
  style,
  rounded,
}, ref) => {

  return (
    <Item rounded={rounded} style={[styles.inputItem, style]}>
      <Input 
        ref={ref}
        autoFocus={true}
        autoCapitalize="none"
        placeholder={placeholderText}
        keyboardType="default"
        onChangeText={handleChange(fieldType)}
        value={value}
       />
      </Item>
  );
});

代码沙盒： https://snack.expo.io/@nhammad/carefree-cereal

Answer 1

onChangeText 是一个接受 1 个参数 value 的函数

onChangeText 是(value: string) => void

所以你只需要像下面的例子一样使用onChangeTextCallback

 // ✅ Right way to do it!✅ 

const [value, setValue] = useState<string>('')

<TextInput value={value} onChangeText={setValue} />

// or onChangeText={(newValue: string) => setValue(newValue)}

---

// Your code
// ❌ Wrong way to do it! ❌

onChangeText={()=>handleChange(fieldType)}
// You forget about value here
// onChangeText={(value: string)=> handleChange(fieldType)}
// You need to provide value to your changing value callback

如果对你有帮助，请告诉我！?‍♂️

更新：

查看链接->https://snack.expo.io/bLEsPJXPS