Передать значение из пользовательского TextInput - PullRequest
Новая
       38

Передать значение из пользовательского TextInput

0 голосов
/ 19 ноября 2018

У меня действительно простой, но стилизованный TextInput, объявленный как собственный компонент.

Это выглядит так: 

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

const StyledInput = styled.TextInput`
    margin-bottom: 16px;
    width: 345px;
    padding-left: 8px;
`;

class Input extends React.Component {
    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    render() {
        return(
            <StyledInput
                style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                // onChangeText={(text) => this.setState({text})}
                value={this.state.text}
                placeholder={this.props.placeholder}
                secureTextEntry={this.props.isPassword}
            />
        )
    }
}

export default Input

Мое намерение состоит в том, чтобы включить этот компонент в сцену и вызвать событие onChangeText всякий раз, когда ввод текста изменился. Я пробовал бесчисленное множество способов ... но безуспешно передать значение. 

<Input style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(code) => this.setState({code})}
    label='Aktiveringskods'
    placeholder='Aktiveringskod:'
/>

Использование обычного TextInput работает безупречно: 

<TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(username) => this.setState({username})}
    label='Välj användarnamn'
    placeholder='Användarnamn:'
/>

Что мне здесь не хватает?

1 Ответ

0 голосов
/ 19 ноября 2018

Причина в том, что вы не передали onChangeText на TextInput в своем пользовательском Input. 

render() {
    return(
        <StyledInput
            {...this.props}
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            value={this.state.text}
            placeholder={this.props.placeholder}
            secureTextEntry={this.props.isPassword}
        />
    )
}
...