Question

我有一个非常简单但样式设置为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:'
/>

我在这里想念什么？

Answer 1

原因是您没有在自定义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}
        />
    )
}

从自定义TextInput传递值

1 个答案: