我试图在用户单击提交后获取输入的值,我有一个简单的表单要求用户签名,
当用户单击提交时,在 handleLogin 中,我调用 handleSignature 并将签名传递给输入,但这里是我丢失了如何获取此字段的值,即包含签名.led 的字段。
export default function Form({navigation}) {
const handleLogin = (data, setSubmitting) => {
handleSignature();
}
return (
<>
<Formik
initialValues = {{first_name: '', last_name:' }}
onSubmit = { (values, {setSubmitting }) => {
handleLogin(values, setSubmitting);
}}>
{({handleChange, handleBlur, handleSubmit, values, isSubmitting, errors, touched}) => (
<>
<View style={styles.CONTENT}>
<View style={styles.INPUTS}>
<MyTextInput
label = "First Name"
onChangeText = {handleChange('first_name')}
onBlur = {handleBlur('first_name')}
values = {values.first_name || ''}
returnKeyType = "next"
innerRef = {input1}
/>
<MyTextInput
label = "Last Name"
onChangeText = {handleChange('last_name')}
onBlur = {handleBlur('last_name')}
values = {values.last_name}
returnKeyType = "next"
refInner = {input2}
/>
<MyTextInput
values = {signature}
/>
</View>
</>
</Formik>
)
如果要获取输入的值,则需要将值绑定到状态,如下所示
constructor(props) {
super(props);
this.state = {
first_name: '', // state
last_name: ''
};
}
<MyTextInput
label="First Name"
onBlur={handleBlur('first_name')}
values={values.first_name || ''}
returnKeyType="next"
innerRef={input1}
onChangeText={e => this.setState({first_name: e})} // binding value
/>
当您绑定值时,您可以按如下方式获取任何函数的值
const handleLogin = (data, setSubmitting) => {
handleSignature();
console.log(this.state.first_name) // the value of input
}
如果您使用类组件,上述方法将有效,但在您的情况下,您使用的是功能组件,因此您可以使用以下代码片段解决问题
import React, {useState, useEffect} from 'react';
export default function Form({navigation}) {
const [firstName, setFirstName] = useState('');
const [lastName, setlastName] = useState('');
const handleLogin = (data, setSubmitting) => {
handleSignature();
console.log(firstName); // output the firstname
console.log(lastName); // output the lastname
};
return (
<>
<MyTextInput
label="First Name"
onBlur={handleBlur('first_name')}
values={values.first_name || ''}
returnKeyType="next"
innerRef={input1}
onChangeText={e => setFirstName(e)} // binding value
/>
</>
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句