Answer the question
In order to leave comments, you need to log in
How to properly work with a form in React-Native?
Greetings!
In Reat, I created a component that renders a simple form (2 fields and a button). By clicking on the button (onSubmit) - I send the data of the entire form to the handler. Now, you need to implement a similar form in React-Native, in connection with this, a few questions:
1. In HTML, it is generally customary to write the form structure as: from->input. In React-Native, I did not find the Form component while inserting a TextInput without a form. React-Native inserting input without form?
2. If there is no form, then I don’t understand how to correctly collect data from input. I tried to do it through ref, but the "value" of the specified field could not be obtained in the handler. So what's the right way to do it?
// отрисовываем форму
return (
<View>
<Text style={ styles.h1 }>Авторизация:</Text>
<View>
<Text style={ styles.bold }>Login (numeric):</Text>
<TextInput
keyboardType="numeric"
style={ { height: 40, borderColor: "gray", borderWidth: 1 } }
/>
<Text style={ styles.bold }>Password (default):</Text>
<TextInput
ref={ refInputLogin }
keyboardType="default"
style={ { height: 40, borderColor: "gray", borderWidth: 1 } }
/>
<Button
ref={ refInputPassword }
color="#841584"
onPress={ () => props.onFormSubmit(refInputLogin, refInputPassword) }
title="GO"
/>
</View>
</View>
);
// обработчик формы
handleFormSubmit = (login, password) => {
console.log(login.current.value);
console.log(password.current.value);
};
Answer the question
In order to leave comments, you need to log in
I don’t know how you develop something without reading the documentation.
TextInput
Handling Text Input
In the React documentation, the topic of controlled components is also fully covered.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question