Hi, I’m making a form and I need to clear my textInputs (I have 9) when I submit data, I use a ref in textInput and this.textInputClear() in the submit button (touchableOpacity), but there is an error when I do it, undefined is not an object (evaluating ‘this.textCedula.clear’)
My form:
import React from 'react';
import {
View,
StyleSheet,
TextInput,
ScrollView,
Text,
TouchableOpacity,
TouchableHighlight,
} from 'react-native';
import Modal from 'react-native-modal';
import { useState } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Dropdown } from 'react-native-material-dropdown';
export default class RegistroScreen extends React.Component {
constructor(props)
{
super(props);
this.state=({nombre:'',apellidos:'',alias:'',nro_cedula:'',correo:'',passwd:'',passwd2:'',celular:''});
//this.state=({nacionalidad:[]})
}
componentWillMount(){
this.getdata();
}
getdata(){
var temp = [];
fetch("localhost:8080/", {
method: "Get",
headers: {
Accept: "application/json",
"Content-Type": "aplication/json"
}
})
}
InsertRecord=()=>
{
var nombre=this.state.nombre;
var apellidos=this.state.apellidos;
var alias=this.state.alias;
var nro_cedula=this.state.nro_cedula;
var correo=this.state.correo;
var passwd=this.state.passwd;
var passwd2=this.state.passwd2;
var celular=this.state.celular;
if(nombre.length==0 || apellidos.length==0 || nro_cedula.length==0 || correo.length==0 || passwd.length==0 || passwd2.length==0 || celular.length==0)
{
alert("Le faltan campos por llenar");
}else{
var InsertAPIURL="http://10.0.2.2:80/api/insert.php";
var headers={
'Accept':'application/json',
'Content-Type':'application/json',
};
var Data={
nombre: nombre,
apellidos: apellidos,
alias: alias,
nro_cedula: nro_cedula,
correo: correo,
passwd: passwd,
passwd2: passwd2,
celular: celular,
};
fetch(InsertAPIURL,
{
method:'POST',
headers:headers,
body: JSON.stringify(Data),
}
).then((response)=>response.json())
.then((response)=>
{
alert("Registro realizado con éxito");
{/* SCREEN LOGIN */}
this.props.navigation.navigate('Login');
// value('cedula') = '';
})
.catch((error)=>
{
alert("Error"+error);
}
)
}
}
render() {
return (
<ScrollView style={styles.container}>
<View style={{flex: 1, flexDirection: 'column'}}>
<View style={styles.inputGroup}>
<Icon style={styles.searchIcon} name="address-card-o" size={19}
color="#5292de"/>
<TextInput
id="cedula"
ref={cedula => { this.textCedula = cedula }}
// style={styles.input}
underlineColorAndroid="transparent"
placeholder="N° Cédula (RUN/RUT)"
placeholderTextColor="#778DF2"
autoCapitalize="none"
onChangeText={nro_cedula=>this.setState({nro_cedula})}
// onChangeText={this.handleEmail}
/>
</View>
<View style={{flex: 4, flexDirection: 'column'}}>
<View style={{flex: 0.5}}>
<TouchableOpacity
style={styles.submitButton}
onPress={this.InsertRecord,this.textCedula.clear()}
>
<Text style={styles.submitButtonText}> Enviar </Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
}
Please, help me
(I don’t know why nobody answer my questions, if is for my english, I’m sorry, I only know basic english)