M
M
Michael R.2019-07-14 17:38:15
React Native
Michael R., 2019-07-14 17:38:15

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

1 answer(s)
A
Anton Spirin, 2019-07-14
@Mike_Ro

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 question

Ask a Question

731 491 924 answers to any question