циклически проходить по массиву записей в реагирующей окончательной форме - PullRequest
Новая
       13

циклически проходить по массиву записей в реагирующей окончательной форме

0 голосов
/ 12 ноября 2018

У меня есть форма в компоненте, которая будет иметь несколько записей для циклического перехода. записи вызываются и хранятся в хранилище с избыточностью на componentdidMount. У меня возникают проблемы с циклическим просмотром записей в моей форме. Я могу достаточно легко установить начальные значения, но каков наилучший подход, когда пользователь нажимает кнопку «Далее», чтобы выполнить инициализацию response-final-form с данными из следующей записи в коллекции (data [x])? 

    export type IFormDataStatProps = {
    data: Array<FormData>;
}

export interface IFormDataDispatchProps {
    getData: () => void;
}

type IFormDataPageProps = IFormDataStatProps & IFormDataDispatchProps;

class FormPage extends React.Component<IFormDataPageProps> {

    constructor(props: IFormDataPageProps) {
        super(props);
    }

    public componenetDidMount() {
        this.props.getData();
    }

    onSubmit = (values) => {
        window.alerty(JSON.stringify(values, undefined, 2));
    }

    nextRecord = () => {
        //something here to reinitialize the form with data from next array position (data[1]).  There might be something built into react-final-form to do this.
    }

    public render() {
        return (
            <Form
                onSubmit={this.onSubmit}
                initialVaues={{
                    firstName: data[0].firstName,
                    lastName: data[0].lastName
                }}
                render={({ handleSubmit, form, submitting, pristine, values}) => (
                    <Field
                        name="firstName"
                        component="input"
                    />

                    <Field
                        name="lastName"
                        component="input"
                    />

                    <button type="submit">Save</button>
                    <button onClick={this.nextRecord}>Next</button>
                )}
        )
    }
}
...