如何使用函数提交表单?本机的反应

Question

当我停止类型时，我想提交一个表单，我使用react hook表单并在函数中调用handlessubmit，它不起作用，请帮助我，这是我的代码，我正在做这个代码的映射，我已经尝试过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

下面是一个如何在输入完成后实现预定操作的示例:

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,
},
});