Неудачный тип опоры: недопустимое значение опоры

Всякий раз, когда я пытаюсь ввести TextInput, я продолжаю получать это предупреждение: неверный тип реквизита неверный реквизит "значение" типа "объект", переданный в "текстовый ввод", ожидаемая "строка"

ЛогинФорма.js

import React, { Component } from 'react';
import { Card, CardSection, Button, Input } from './common';

class LoginForm extends Component {

    state = { email: '', password: '', error: '' };

    render() {
        return (
            <Card>
                <CardSection>
                    <Input 
                    label='Email'
                    placeholder='[email protected]'
                    value = {this.state.email}
                    onChangeText = {(email) => this.setState({ email: email } )}
                    />
                </CardSection>

Input.js

import React from 'react';
import { TextInput, View, Text } from 'react-native';

const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
    return (
        <View style = {styles.containerStyle}>
            <Text style = {styles.labelStyle}>{ label }</Text>
                <TextInput
                secureTextEntry = {secureTextEntry}
                placeholder = {placeholder}
                style = {styles.inputStyle}
                value = {value}
                onChange = {onChangeText}
                autoCorrect = {false}
                />
        </View>
    );
};

Не могли бы вы помочь мне найти проблему?

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
0
7 968
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Слушатель событий, который вам нужно связать, это onChangeText

onChangeText ожидает строковый параметр... где onChange ожидает объект следующей формы: nativeEvent: { eventCount, target, text}... вот почему вы получаете эту ошибку...

<Text style = {styles.labelStyle}>{ label }</Text>
                <TextInput
                secureTextEntry = {secureTextEntry}
                placeholder = {placeholder}
                style = {styles.inputStyle}
                value = {value}
                onChangeText = {onChangeText} // <--Look at this
                autoCorrect = {false}
                />

ой как стыдно!! Большое спасибо !!

Abdallah Sabri 08.04.2019 12:43

они очень похожи... и немного сбивают с толку :)

Hend El-Sahli 08.04.2019 12:44

Да, я знаю ... Спасибо за помощь :)

Abdallah Sabri 08.04.2019 12:55
onChange = {(e) => onChangeText(e.text)}

или

onChangeText = {onChangeText}

Большое спасибо ! Это опечатка и я не заметил

Abdallah Sabri 08.04.2019 12:45

Упомянутая вами ошибка или Warning: Failed prop type: Invalid prop value of type number supplied to TextInput, expected string появляется, когда вы пытаетесь ввести значение типа number вместо string.

Чтобы избежать ошибки и следовать наилучшей практике для react-native, нужно обернуть входное значение функцией String() следующим образом:

<TextInput
  value = {String(this.props.value)}
  onChange = {this.props.onChange}
  placeholder = {"جستجو"}
  blurOnSubmit = {false}
  style = {{flex:0.9}}
  returnKeyType = "done"
/>

Другие вопросы по теме