Невозможно ввести текст в текстовое поле ReactNative - PullRequest
Новая
       18

Невозможно ввести текст в текстовое поле ReactNative

1 голос
/ 07 января 2020

РЕДАКТИРОВАНИЕ Я новичок в ReactNative и пытаюсь писать в своих текстовых полях. Однако я не могу ничего ввести. Я попытался добавить избыточную форму для экрана регистрации. Это мое Signup.js: 

import React, { Component } from 'react';
import {StyleSheet, Text, View, StatusBar, TouchableOpacity} from 'react-native';
import {Field, reduxForm} from 'redux-form';

import Logo from '../components/Logo';
import Form from '../components/Form';
import InputText from '../components/InputText';

import {Actions} from 'react-native-router-flux';

const styles = StyleSheet.create({
    container:{
        backgroundColor: '#232122',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
},
signupTextCont:{
    flexGrow: 1,
    alignItems:'flex-end',
    justifyContent: 'center',
    paddingVertical:16,
    flexDirection:'row'
},
signupText: {
 color:'rgba(255,255,255,0.7)',
 fontSize:16
},
signupButton: {
 color: '#FFA200',
 fontSize:16,
 fontWeight:'500'
},
button:{
 width:300,
 backgroundColor:'#FFA200',
 borderRadius:25,
 marginVertical:10,
 paddingVertical: 13
},
buttonText:{
 fontSize:16,
 fontWeight:'500',
 color:'#ffffff',
 textAlign:'center'
},
errorText:{
    color:"#FFA200",
    fontSize:14,
    paddingHorizontal:16,
    paddingBottom: 8
}
});

class Signup extends Component<{}> {

goBack() {
    Actions.pop();
}

createNewUser = () =>{
    alert("Utilizador criado com sucesso!")
}

onSubmit = (values)  => {
    console.log(values);
}

renderTextInput = (field) => {
const {meta: {touched, error}, label, secureTextEntry, maxLength, keyboardType, placeholder, input: {onChange, ...restInput}} = field;
return(
    <View>
        <InputText
            onChangeText={onChange}
            maxLength={maxLength}
            placeholder={placeholder}
            keyboardType={keyboardType}
            secureTextEntry={secureTextEntry}
            label={label}
            {...restInput} />
            {touched && <Text style={styles.errorText}>{error}</Text>}
        </View>
);
}


render() {
    const {handleSubmit} = this.props;
    return(
        <View style={styles.container}>
            <Logo/>
            <Field 
                name="name" 
                placeholder="Insira o seu nome"
                component={this.renderTextInput}/>
            <Field 
                name="email" 
                placeholder="Insira o seu email"    
                component={this.renderTextInput}/>
            <Field 
                name="password" 
                placeholder="Password"
                secureTextEntry={true}
                component={this.renderTextInput}/>
            <TouchableOpacity style={styles.button} onPress={handleSubmit(this.onSubmit)}>
             <Text style={styles.buttonText}>Signup</Text>
            </TouchableOpacity>
            <View style={styles.signupTextCont}>
                <Text style={styles.signupText}>Ja tens uma conta?</Text>
                <TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}> Entra</Text></TouchableOpacity>
            </View>
        </View>
        )
    }
}
const validate = (values) => {
const errors = {};
if(values.name){
    errors.name = "Name is required"
}
if(values.email){
    errors.email = "Email is required"
}
if(values.name){
    errors.password = "Password is required"
}
return errors;

}

export default reduxForm({
form: "register",
validate
})(Signup)

И это мое InputText: 

import PropTypes from "prop-types";
import React, {Component} from "react"; 
import {TextInput, Text, View, StyleSheet} from "react-native";

const propTypes = {
mapElement: PropTypes.func,
onSubmitEditing: PropTypes.func,
onChangeText: PropTypes.func,
value: PropTypes.string,
placeholder: PropTypes.string,
maxLength: PropTypes.number,
keyboardType: PropTypes.string,
secureTextEntry: PropTypes.bool,
label: PropTypes.string
};

const defaultProps = {
mapElement: (n) => {},
onSubmitEditing: () => {},
onChangeText: () => {},
value: "",
placeholder: "",
maxLength: 200,
keyboardType: "default",
secureTextEntry: false,
label: ""
 };

const styles = StyleSheet.create({
  inputBox: {
width:300,
backgroundColor:'rgba(255, 255,255,0.2)',
borderRadius: 25,
paddingHorizontal:16,
fontSize:16,
color:'#ffffff',
marginVertical: 10
}

});

class InputText extends Component <{}> {
render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, value, onChangeText, onSubmitEditing} = this.props;
    return (
        <View>
            <TextInput
                style={styles.inputBox}
                underlineColorAndroid="rgba(0,0,0,0)"
                placeholder={placeholder}
                placeholderTextColor="rgba(255,255,255,0.8)"
                selectionColor="#999999"
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                maxLength={maxLength}
                returnKeyType="next"
                value={value}
                onSubmitEditing={onSubmitEditing}
                onChangeText={this.onChangeText} />
        </View>
    );
}
}

InputText.defaultProps = defaultProps;

InputText.propTypes = propTypes;

export default InputText;

Я не понимаю, почему это происходит. Пожалуйста, помогите мне

1 Ответ

1 голос
/ 07 января 2020 
<TextInput
  style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
  onChangeText={text => onChangeText(text)}
  value={value}
/>

Я думаю, пробуя этот метод

...