触摸的属性未重置

如何解决触摸的属性未重置

我有一个Formik表单，我可以在其中输入用户输入并在提交后运行查询。

当我单击搜索按钮时，将显示一个列表。所有列表项都有自己的按钮。当我第一次单击绿色的添加按钮（从列表项中）时，该按钮不起作用。控制台日志的内容未打印。相反，将触发inputField的onBlur事件。但是，如果我再次单击+按钮，那么它将起作用并且不会打印。该问题在模拟器/电话中可见，而在沙盒上的Web模式中则不可见。

export const AddFriendScreen: React.FunctionComponent = () => {
  const initialValues: FormValues = {
    input: '',};

  const [showFlatList,setShowFlatList] = useState<UsersLazyQueryHookResult>(
    '',);


  const handleSubmitForm = (
    values: FormValues,helpers: FormikHelpers<FormValues>,) => {

    loadUsers({
      variables: {
        where: {
          OR: [
            { phoneNumber: newPhoneNumber },],},});
    helpers.resetForm();
 };

  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.searchTopContainer}>
        <View style={styles.formContainer}>
          <Formik
            initialValues={initialValues}
            onSubmit={handleSubmitForm}
            validationSchema={validationSchema}>
            {({ handleChange,handleBlur,handleSubmit,values }) => (
              <View style={styles.searchFieldContainer}>
                <View style={styles.form}>
                  <FieldInput
                    handleChange={handleChange}
                    handleBlur={handleBlur}
                    value={values.input}
                    fieldType="input"
                    icon="user"
                    placeholderText="E-Mail oder Telefonnummer oder Name"
                  />
                  <ErrorMessage
                    name="input"
                    render={(msg) => <ErrorText errorMessage={msg} />}
                  />
                </View>
                <View style={styles.buttonContainer}>
                  <ActionButton buttonText="Suchen" onPress={handleSubmit} />
                </View>
              </View>
            )}
          </Formik>
        </View>
        <View style={styles.listHolder}>
          {data && showFlatList !== null && (
            <UsersFoundList
              data={data}/>
          )}
        </View>
      </View>
    </SafeAreaView>
  );
};

零食博览会：

https://snack.expo.io/@nhammad/jealous-beef-jerky

[！[在此处输入图片描述] [1]] [1]

编辑：

找到了一种解决方法，但仍然可以使用更简单的解决方案。仍然没有弄清楚到底是什么原因造成的。

解决方法

但是，这将导致在提交表单并返回/呈现数据后立即显示formik错误。例如，错误提示输入字段不应为空。
...
为什么键盘会干扰这一点？

可能是因为当您调用Keyboard.dismiss()时，实际上是在使输入失去焦点，这将触发validateOnBlur事件。
因此，当您取消关注某个字段（模糊）时，它将尝试验证（validateOnBlur），并且由于该字段为空，因此将显示验证。

仅当我们尝试重新提交没有输入内容的表单时，错误才会显示。

如果仅当您提交表单时才显示错误，则应传递到Formik组件validateOnBlur={false}。这样，在您调用Keyboard.dismiss()时它不会显示错误消息，因为它将删除模糊时的验证。

但是它仍然验证输入何时发生更改，从而触发validateOnChange。您还可以传递到Formik组件validateOnChange={false}来禁用对更改的验证，并且仅在您提交表单（按按钮）时验证。

请注意，validateOnChange和validateOnBlur默认为true。

编辑：

您需要添加validateOnBlur={false}，但无需调用Keyboard.dismiss()，而需要调用fieldRef.current.blur()。但是要使其正常工作，您需要在输入组件中使用React.forwardRef。

因此您需要创建fieldRef

const fieldRef = useRef();

传递给组件

<FieldInput
    ref={fieldRef} // passing the ref
    handleChange={handleChange}
    handleBlur={handleBlur}
    value={values.input}
    fieldType="input"
    icon="user"
    placeholderText="input"
/>

您需要用FieldInput包裹React.forwardRef并将ref传递给Input组件。

// wrapping the component with React.forwardRef
export const FieldInput: React.FunctionComponent<FieldInputProps> = React.forwardRef(({
  handleChange,handleBlur,fieldType,placeholderText,value,style,rounded,//ref,},ref) => {
  return (
    <Item rounded={rounded} style={[styles.inputItem,style]}>
      <Input
        ref={ref} // passing the ref 
        autoFocus={true}
        autoCapitalize="none"
        style={styles.inputField}
        placeholder={placeholderText}
        keyboardType="default"
        onChangeText={handleChange(fieldType)}
        onBlur={handleChange(fieldType)}
        value={value}
      />
    </Item>
  );
});

现在在handleSubmitForm中，您致电fieldRef.current.blur()

const handleSubmitForm = (
    values: FormValues,helpers: FormikHelpers<FormValues>,) => {
    // other logic from your submit
    if (fieldRef && fieldRef.current)
          fieldRef.current.blur();
};

以此，您将解决问题和评论中的问题。

Working example

关于useRef的解释

我们需要使用useRef钩子，以便我们可以获取Input组件的元素以能够调用blur函数，因此不要专注于输入和可以单击加号按钮。 我们需要使用useRef钩子，因为这是您在功能组件中创建ref的方式。