如何使用函数提交表单？反应原生

Question

我想在停止输入时提交一个表单，我正在使用 react hook 表单并在函数中调用 handleSubmit 并且它不起作用，请帮助我，这是我的代码，我正在做一个地图这段代码，我试过用 ref 但它不起作用。这是我的组件。

import React, {useRef} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import tailwind from 'tailwind-rn';
import {useDebounce} from 'use-debounce';
import {useForm, Controller} from 'react-hook-form';
import {MAIN_COLOR, GRAY} from '../../constants/theme';

function RegisterFormHook({data, onSubmit, control, errors}) {
  const [underlineColor, setUnderlineColor] = React.useState(GRAY);
  const [field, setField] = React.useState('');
  const [value] = useDebounce(field, 1000);
  const inputElement = useRef();

  const {handleSubmit} = useForm();

  React.useEffect(() => {
    if (value.length !== 0) {
      handleSubmit(onSubmit({[data.name]: value}));
    }
    console.log(errors);
  }, [value]);

  const onFocus = () => {
    setUnderlineColor(MAIN_COLOR);
  };

  const onBlur = () => {
    setUnderlineColor(GRAY);
  };

  return (
    <View style={tailwind('px-8')}>
      <Controller
        control={control}
        name={data.name}
        rules={data.rules}
        render={({field: {onChange, value}}) => (
          <TextInput
            placeholder={data.placeholder}
            ref={inputElement}
            style={[
              tailwind('text-black p-0 text-xl pb-1 flex-row'),
              {
                borderBottomWidth: 1,
                borderBottomColor: underlineColor,
              },
            ]}
            onChangeText={value => {
              onChange(value);
              setField(value);
            }}
            onBlur={onBlur}
            value={value}
            onFocus={() => onFocus()}
          />
        )}
      />
      <Text>{errors[data.name]?.message}</Text>
    </View>
  );
}

export default RegisterFormHook;

我想在 useEffect 中提交，但它只在我按下按钮时起作用。

Answer 1

这里是sample 在输入完成后如何执行预定操作：

import * as React from 'react';
import { TextInput, View, StyleSheet, Alert } from 'react-native';
import Constants from 'expo-constants';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  let timer = React.useRef();
  const [text, setText] = React.useState('');

  React.useEffect(() => {
    if (text) {
      timer = setTimeout(() => {
        Alert.alert('TEXT : ' + text);
      }, 3000);
    }
  }, [text]);

  return (
    <View style={styles.container}>
      <Card>
        <TextInput
          placeholder={'Enter the tetxt'}
          onChange={(e) => {
            clearTimeout(timer);
            setText(e.nativeEvent.text);
          }}
        />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});