android - 在 Android React-Native 上处理 onEndEditing

Question

我有一个问题，在真正的 Android 设备上单击 a 时，未在最后一个聚焦的文本字段上调用 ​​onEndEditing 处理程序。因此，基本上要重现该问题，您将在文本字段中输入数据，然后在文本字段仍处于焦点时单击按钮。

我有以下代码示例：

export default class Test extends Component<{}> {
state = {
    title: "",
    number1: 0,
    number2: 0,

    number1Partial: '0',
    number2Partial: '0'
};

nameChangeHandler = (newName: string) => {
    this.setState({
        title: newName
    });
}

numericValueChanger = (value: string, field: string) => {
    let reg = /^-?\d+\.?\d*$/;

    if(reg.test(value))
    {

            switch(field)
            {
                case 'number1':
                    this.setState({
                        number1Partial: value,
                        number1: parseInt(value)
                    });
                    break;  
                case 'number2':
                    this.setState({
                        number2Partial: value,
                        number2: parseInt(value)
                    });
            }


    }
    else {
        alert("Please enter a whole number");

        switch(field)
        {
            case 'number1':
                this.setState({
                    number1Partial: this.state.number1 + ""
                });
                break;
            case 'number2':
                this.setState({
                    number2Partial: this.state.number2 + ""
                });
                break;
        }
    }
};

valueTypingHandler = (value: string, field: string) => {
    switch(field)
    {
        case 'number1':
            this.setState({
                number1: value
            });
            break;
        case 'number2':
            this.setState({
                number2: value
            });
            break;
    }
};

submitHandler = () => {
    this.props.navigation.state.params.created({
        title: this.state.title,
        number1: this.state.number1,
        number2: this.state.number2
    });
    this.props.navigation.goBack();
};

render() {
    return (
        <View>
            <Text>Title</Text>
            <TextInput
                value={this.state.title}
                onChangeText={this.nameChangeHandler} 
            />
            <Text>Number 1</Text>
            <TextInput
                keyboardType='numeric'
                value={this.state.number1}
                onChange={(e: any) => this.valueTypingHandler(e.nativeEvent.text, 'number1')}
                onEndEditing={(e: any) => this.numericValueChanger(e.nativeEvent.text, 'number1')}
            />
            <Text>Number 2</Text>
            <TextInput
                keyboardType='numeric'
                value={this.state.number2}
                onChange={(e: any) => this.valueTypingHandler(e.nativeEvent.text, 'number2')}
                onEndEditing={(e: any) => this.numericValueChanger(e.nativeEvent.text, 'number2')}
            />
            <Button
                title="Submit"
                onPress={this.submitHandler}
            />
        </View>
    );
}

} }

不幸的是，我不得不在存储状态方面做一些奇怪的事情，但是“部分”变量基本上可以跟踪到目前为止输入的内容，以便文本字段可以继续显示用户输入的内容，而无需实际更新状态我关心的变量我要求它首先通过正则表达式。我相当肯定会有更好的方法来做到这一点，所以我绝对愿意接受那里的建议。

捕获我能想到的最后一个焦点文本字段的文本的几个选项包括：

• 为每个字段添加一个“引用”，存储最后编辑的字段，然后尝试根据最后编辑的字段将该值应用于状态
• 将 onChangeText 处理程序添加到每个字段并完全删除 onEndEditing 函数。需要在该函数中运行正则表达式

只是想看看我是否完全缺少其他一些解决方案，或者是否有一些推荐的方法来处理这个问题。在寻找解决方案时，我并没有真正找到解决问题的建议，只有少数人面临类似的问题，没有调用 onBlur。显然这是一个Android约定

提前致谢！

标签： androidreact-nativeuser-inputreact-native-android