Question

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

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

我的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传递状态“ autoFocus”，并在传递到下一步时更改值，这是行不通的。

我有点困惑...也许我在多步骤组件上做错了吗？

用autoFocus反应本机的Multiple TextInput

0 个答案: