Обработка onEndEditing на Android React-Native - PullRequest
0 голосов
/ 17 апреля 2019

У меня проблема с тем, что при нажатии на реальном устройстве Android обработчик 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>
    );
}

}}

Мне, к сожалению, пришлось делать какие-то странные вещи с сохранением состояния, но «частичные» переменные по существу отслеживают то, что было введено до сих пор, так что текстовое поле может продолжать показывать то, чем был пользовательвходя без фактического обновления состояния переменной, о которой я забочусь, я должен сначала пройти через регулярное выражение.Я вполне уверен, что был бы лучший способ сделать это, поэтому я определенно открыт для предложений там.

Несколько вариантов захвата текста последнего выделенного текстового поля, о которых я могу подумать, включают:

  • Добавьте 'ref' к каждому полю, сохраните, какое поле было отредактировано последним, а затем попытайтесь применить значение к состоянию на основе этого последнего отредактированного поля
  • Добавить обработчик onChangeText к каждомуполе и полностью удалите функцию onEndEditingНужно было бы запустить регулярное выражение в этой функции

Просто хотел посмотреть, есть ли какое-то другое решение, которое я пропустил полностью, или есть какой-то рекомендуемый способ справиться с этим.Пока я искал решение, я не смог найти рекомендации по решению проблемы, просто несколько человек, столкнувшихся с похожими проблемами, не вызывали onBlur.Очевидно это соглашение Android, хотя

Заранее спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...