Question

您好，我来寻求您的帮助，是因为我想做一个多步骤表单（11个步骤），以确保它能够测试每个输入字段，并在最后一步重置表单。

每个步骤都会有一个屏幕。

我认为您必须更改状态，并且我也认为redux似乎很适合我的情况，因为数据是持久性的，但是我知道redux会影响应用程序的性能。

我有点迷茫，我没路可走，请问您有什么线索吗？

在此先感谢您的帮助和答复。

-------------------------------------------- ---------更新---------------------------------------- -------------------------

我已经走了很长一段路，但是我阻碍了字段的验证，我按照示例“表单向导” redux-form doc（https://redux-form.com/6.4.3/examples/wizard/）进行操作，但是我看不出如何防止输入字段错误时，导航到下一个屏幕。

const Fields = [{
_id:1,
field:[
    {
        "name": 'Name',
    },
    {
        "name":'Age'
    }

 ]}, {

_id:2,
field:[
    {
        "name":'Email'
    }

]}, {

_id:3,
field : [
    {
        "name":'City'
    },
    {
        "name":'Countries'
    }
]}];

export default Fields;

我的组件FormWizard.js：

class FormWizard extends Component {
constructor(props) {
    super(props);

    if(this.props.navigation.state.params === undefined) {
        this.page = 0;
    }
    else
    {
        this.page = this.props.navigation.state.params.page;
    }
}

_nextStep = (page, values) => {
    this.props.navigation.push("FormWizard", {page: this.page + 1});
    console.log('submitting from',values);
};

render() {
    const page  = this.page;
    return(
        <View>
            <DynamicForm
                page={page}
                nextStep={this._nextStep}
            />
        </View>
    )
}

}

export default FormWizard;

我的组件DynamicForm.js：

const submit = values => {
console.log('submitting from', values);
};

const renderInput = ({ label, input: {onChange, ...restInput }, meta:{error, touched} }) => {
return <View>
    <TextField
        style={styles.input}
        label={label}
        onChangeText={onChange}
        {...restInput}
    />
    {touched && (error && (<Text style={{color: 'red'}}>{error}</Text>))}
</View>
};

const Form = props => {

const { handleSubmit, nextStep, page} = props;

return <View>
    <Text>Etape : {page}</Text>
    {Fields[page].field.map((el, index) => (
        <View key={index}>
            <Field
                label={el.name}
                name={el.name}
                component={renderInput}
            />
        </View>
    ))}

    {page === Fields.length - 1 ? (
        <TouchableOpacity onPress={handleSubmit(submit)}>
            <Text style={styles.button}>Submit</Text>
        </TouchableOpacity>
    ) : (
        <TouchableOpacity onPress={nextStep}>
            <Text style={styles.button}>Suivant</Text>
        </TouchableOpacity>
    )}

</View>;
};

   const FormWizard = reduxForm({
       form:'test',
       validate
   })(Form);

export default FormWizard;

非常抱歉，如果代码格式不正确，我会尝试解决问题，在此先感谢您的帮助和答复。

Answer 1

我会仔细研究redux-form。 https://redux-form.com/7.4.2/ 关于它的文档很多，包括示例。

Redux-Form非常强大且可自定义。示例向导表单可能是您正在寻找的方案： https://redux-form.com/7.4.2/examples/wizard/

Answer 2

应用程序将集成一个多步骤表单，该表单将包含11个步骤，如果我必须为每个步骤创建一个组件，那么我将拥有很多。

好，最后我使用了作弊形状，我想做的就是一按下一个按钮就可以在一个屏幕上编辑表单。

对她来说，我首先尝试编辑一个叫做page的主题，我想在单个屏幕上按下按钮后立即更改其值。

如何建立多步骤表格

2 个答案: