更改 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>
  );
});

Codesandbox: 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

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

更新：

勾选 link -> https://snack.expo.io/bLEsPJXPS

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

can't type in Input field after changing onChangeText

javascript

typescript

reactjs

react-native

formik