Реагируйте на собственный множественный TextInput с автофокусом - PullRequest
Новая
       21

Реагируйте на собственный множественный TextInput с автофокусом

0 голосов
/ 09 января 2020

У меня проблема с использованием свойства "autoFocus" в компоненте TextInput из'act-native-paper '.

В моем компоненте мне нужно отобразить несколько шагов (есть один вход на step), и на каждом шаге мне нужно автоматически фокусировать хороший ввод.

Моя функция render (): 

render() {
    let step;

    switch (this.state.step) {
        case 1:
            step = this.displayStep1();
            break;
        case 2:
            step = this.displayStep2();
            break;
        case 3:
            step = this.displayStep3();
            break;
        default:
            step = this.displayStep1();
    }

    return (
        <KeyboardAvoidingView
            behavior={Platform.OS === 'ios' ? 'padding' : null}
            style={{flex: 1}}>
            <SafeAreaView style={styles.container}>
                <ScrollView style={{padding:10}}>
                <Spinner visible={this.state.loading} textContent={''} />
                    {this.state.error === '' ? null :  <HelperText type="error" visible={this.state.error}>{this.state.error}</HelperText>}
                    {step}
                </ScrollView>
            </SafeAreaView>
        </KeyboardAvoidingView>
    );
}

В каждом displayStep () у меня есть: 

<TextInput
 label="Article"
 value={this.state.article}
 onChangeText={article => this.setState({article})}
 onSubmitEditing={this.submitStep1}
 autoFocus
 blurOnSubmit={false}
 style={{backgroundColor: 'transparent'}}
            />

И только первый шаг автоматически сфокусирован, остальные случайно сфокусированы ...

Моя функция submitStep1: 

submitStep1 = async () => {
    this.setState({error: '', loading: true});
        let data = await this.ws.getInfosArticle(this.state.menu,this.state.article, this.state.fournisseur, "");
        let infos = data.ProDataSet.Infos;

        if (infos && infos.length > 0) {

            Keyboard.dismiss();

            let result = this._getTypInfos(infos);

            if (result === true) {

                this.setState({vfocus: data.ProDataSet.ab_unmap.vfocus});

                //Si le produit à des déclinaisons, on passe sur le choix de la déclinaison
                if( this.state.declinaisons.length > 0 ) {
                    this.setState({declinaison : this.state.declinaisons[0], step: 2});
                } else {
                    //Si on arrive ici c'est que le produit a été trouvé, on peut passer à la STEP 2 avec les infos produits.
                    let details = await this.ws.getDetailsInfosArticle(this.state.menu,this.state.article,"");
                    this._formatDecimals(details.ProDataSet);
                    this.setState({step : 3});
                }
            }
        } else {
            this.setState({error: "Article non trouvé"});
        }

    this.setState({loading: false});
};

Я пытался передать состояние "автофокус" для каждого TextInput и изменение значения, когда я перехожу к следующему шагу, не работает.

Я немного запутался ... Может, я ошибаюсь с многоэтапным компонентом?

...