Question

我正在尝试为用户创建一种输入五位数数字代码的方式。问题在于，我希望他们输入的任何数字都可以转换为一个数字。我的第一个尝试是将value设置为显示文本，但这绝对没有任何效果。因此，我决定制作一个文本组件，其文本为转换后的文本，然后仅使文本输入文本透明。这显然远非理想，但可以成功。理想情况下，我希望以某种方式

a）具有和输入框实际上并不显示输入，而让我的文本组件处理显示

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

c）有人完全向我提供了新方法，甚至告诉我我是个白痴，甚至试图以此方式做事。

generateDisplayText负责根据矩阵转换当前输入。它仅使用当前输入的长度来确定要显示多少个下划线和下划线。

onPress到目前为止更新的当前输入状态

onChange调用检查匹配项，以检查是否存在匹配项

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>
        );
    }
}

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

0 个答案: