Mike_Ro
@Mike_Ro
Войти в АйТи...

Как правильно работать с формой в React-Native?

Приветствую!

В Reat создал компонент, который отрисовывает простую форму (2 поля и кнопка). По клику на кнопку (onSubmit) - отправляю данные всей формы обработчику. Теперь, нужно реализовать аналогичную форму на React-Native, в связи с этим несколько вопросов:

1. В HTML в большинстве своем принято писать структуру формы как: from->input. В React-Native не нашел компонента Form, пока вставил TextInput без формы. В React-Native вставляются input без form?
2. Если form нет, то не понимаю, как правильно забирать данные из input. Попробовал сделал через ref, но "value" указанного поля не удалось получить в обработчике. Так как правильно это делать?

// отрисовываем форму
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);
};
  • Вопрос задан
  • 82 просмотра
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Ума не приложу как вы вообще что-то разрабатываете не ознакомившись с документацией.
TextInput
Handling Text Input
В документации React тема контролируемых компонентов, так же полностью раскрыта.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы