reactjs - React-Native：如何a）清除文本输入或b）禁止显示输入的文本

Question

我正在尝试为用户创建一种输入五位数字代码的方法。问题是我希望他们输入的任何数字都被转换成一个星号。我的第一次尝试是将 设置value为显示文本，但这完全没有做任何事情。因此，我决定制作一个文本组件，其文本是转换后的文本，然后只使文本输入文本透明。这显然远非理想，但它得到了工作。理想情况下，我想要某种方式

a) 拥有一个实际上不显示输入的输入框，让我的文本组件处理显示

b）有办法清除输入中的文本（不太理想，但至少这可以防止背景中有长的透明字符串）

c）有人为我提供了全新的方法，并告诉我我是个白痴，甚至试图这样做。

generateDisplayText 负责根据 astrices 转换当前输入。它只是使用当前输入的长度来确定要显示多少个星号和下划线。

onPress 更新当前输入的状态

onChange 调用 check match 来检查是否存在匹配

import React from 'react';
import {Button} from 'react-native-elements';
import ScreenNames from './ScreenNames';
import {Common, Colors, Sizes} from '../themes/Styles';
import {View, TextInput, Text} from 'react-native';
import Base from './Base';

const CODE_LENGTH = 5;
const MATCH = false;
const INITIAL_STATE = {
    text: [],
    displayText: generateDisplayText(0),
    value: '',
};
function generateDisplayText(textLength) {
    let ret = '* '.repeat(textLength) + '_ '.repeat(CODE_LENGTH - textLength);
    return ret;
}

export default class Password extends Base {
    constructor(props) {
        super(props);
        this.state = INITIAL_STATE;
    }
    componentDidMount() {
        this.refs.textInput.focus();
    }
    pressHandler = event => {
        let key = event.nativeEvent.key;
        key === 'Backspace'
            ? this.setState(oldState => ({text: oldState.text.slice(0, -1)}))
            : this.setState(oldState => ({text: oldState.text.concat(key)}));
        this.setState(oldState => ({
            displayText: generateDisplayText(oldState.text.length),
        }));
    };
    checkForMatch = () => {
        if (this.state.text.length >= CODE_LENGTH) {
            if (MATCH) {
                //go to next screen
                //
            }
            this.refs.textInput.clearImmediate();
            this.setState(() => INITIAL_STATE);

        }
    };
    render() {
        return (
            <View
                style={{
                    flex: 1,
                    width: '100%',
                    height: '100%',
                    marginTop: 20,
                }}>
                <View
                    justification="center"
                    alignment="center"
                    style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                        flex: 1,
                        marginTop: 10,
                    }}>
                    <TextInput
                        style={{fontSize: 20, color: 'green'}}
                        selectionColor="transparent"
                        ref="textInput"
                        placeholderTextColor="black"
                        keyboardType="number-pad"
                        sectureTextEntry={true}
                        onKeyPress={this.pressHandler}
                        onChange={this.checkForMatch}
                        autoCorrect={false}
                        onChangeText={text => this.setState({value: text})}
                        value={this.state.value}
                    />
                    <Text style={{fontSize: 60}}>
                        {' '}
                        {this.state.displayText}{' '}
                    </Text>
                </View>
            </View>
        );
    }
}

标签： reactjsreact-nativeinput