Итак, я создаю форму входа в react-native. В конечном итоге я хотел бы, чтобы он вводил имя пользователя и пароль, а затем отправлял его в свой внутренний API. Однако всякий раз, когда я пытаюсь ввести текст в поля ввода, он не позволяет вводить в них текст. Набранный символ появляется на долю секунды, а затем исчезает. Я склонен сказать, что проблема связана с опцией onChange={}, но это может быть совершенно неверно. Я повесил трубку на это уже несколько часов, поэтому любая помощь будет очень признательна. Код выглядит следующим образом:

import React from 'react';
import { FormInput } from 'react-native-elements';
import {Animated, View, TouchableOpacity} from 'react-native';
import cssta from "cssta/native";
import Config from 'react-native-config';


const LoginButtonContainer = cssta(Animated.View)`
  --primary: white;
  --foreground: var(--primary);
  --background: #1b2535;
  padding: 10px;
  background-color: var(--background);
`;

const LoginButtonText = cssta(Animated.Text)`
  color: var(--foreground);
  text-align: center;
`;

const RegisterButtonContainer = cssta(Animated.View)`
  --primary: #1b2535;
  --foreground: var(--primary);
  --background: white;
  padding: 10px;
  border: 1px solid var(--primary);
  background-color: var(--background);
`;

const RegisterButtonText = cssta(Animated.Text)`
  color: var(--foreground);
  text-align: center;
`;


export default class Login extends React.Component {

    constructor() {    
        this.state = {
            username: '',
            password: ''
        };
    }

    _handleSubmit() {
        let username = this.state.username;
        let password = this.state.password;

        fetch(Config.API_URL + '/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({username: username, password: password})
        }).then((response) => JSON.stringify(response.json()))
            .then((responseData) => { console.log("response: " + responseData); })
            .catch((err) => { console.log(err); });
    }

    _onRegisterClick() {

    }

    render() {
        return(
            <View style={{justifyContent: 'space-between'}}>
                <FormInput
                    placeholder='Username'
                    errorStyle={{ color: 'red' }}
                    errorMessage='Invalid Username or Password'
                    onChange={(username) => this.state.username = username}
                    value={this.state.username}
                />
                <FormInput
                    placeholder='Password'
                    errorStyle={{ color: 'red' }}
                    errorMessage='Invalid Username or Password'
                    onChange={(password) => this.state.password = password}
                    value={this.state.password}
                />
                <TouchableOpacity onPress={this._handleSubmit()}>
                    <LoginButtonContainer>
                        <LoginButtonText>Login</LoginButtonText>
                    </LoginButtonContainer>
                </TouchableOpacity>
                <TouchableOpacity onPress={this._onRegisterClick()}>
                    <RegisterButtonContainer>
                        <RegisterButtonText>Register</RegisterButtonText>
                    </RegisterButtonContainer>
                </TouchableOpacity>
            </View>
        )
    }
};

Заранее спасибо!

0
Mitch 14 Сен 2018 в 16:49

2 ответа

Лучший ответ

Вы пытаетесь изменить state напрямую, вместо этого вы должны использовать setState для изменения состояния и повторного рендеринга затронутой им части дерева доменов .

<FormInput
  ... // other props
  onChange={(username) => this.setState({username})}
/>
2
Pritish Vaidya 14 Сен 2018 в 13:53

Вы не можете изменить состояние таким образом. Вам нужно сделать это так:

 onChange={(password) => this.setState({password:password)}

Или даже более элегантный

 onChange={(password) => this.setState({password)}
1
squashi 14 Сен 2018 в 13:55