0

我在使用来自“react-native-paper”的 TextInput 组件上的“autoFocus”属性时遇到问题。

在我的组件中，我必须显示多个步骤（每个步骤有一个输入），并且每一步我都必须自动聚焦良好的输入。

我的渲染（）函数：

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 传递一个状态“autoFocus”，并在我传递到下一步时更改值，但它不起作用。

我有点困惑......也许我对多步组件做错了？

4

0 回答 0