Как проверить несколько форм в родительском? - PullRequest
Новая
       24

Как проверить несколько форм в родительском?

0 голосов
/ 08 января 2019

Я использую Ant Design. У меня есть два компонента. Активности (Step of Stepper) и ActivityForm. В деятельности я могу добавить деятельность. Каждое занятие - это форма.

Мне нужно проверить все формы, когда пользователь нажимает «Далее». Чтобы проверить все формы, мне нужно иметь все формы в родительском, а затем я могу их итерировать.

Ant design предоставляет декоратор, который вводит реквизит. В частности, мне нужен this.props.validateForm.

ActivityForm: 

render() {
    return (
        <Form key={form_id}>
           ...
        </Form>)
}

Деятельность

AddActivity: 

    const activity = (
        <Collapse.Panel header={'Activity ' + id} key={id}>
                <ActivityForm  {...this.props} />
        </Collapse.Panel>
    );

    this.setState({
        activities: [...this.state.activities, activity]
    })

визуализация: 

    return (
        <div>
            <div>
                <Collapse} accordion>
                    {this.state.activities}
                </Collapse>
            </div>
            <div>
                    <Button type="primary">
                        Next
                    </Button>
            </div>
    )
}

1 Ответ

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

Вам нужно передать this.props.form на каждом дочернем шаге, чтобы вы могли проверить их в родительском шаге, например: 

<Step1 form={this.props.form} />
<Step2 form={this.props.form} />

И затем вы можете проверить в next(), используя this.props.form.validateFields или this.props.form.validateFieldsAndScroll согласно документации . Вам необходимо предоставить имя поля шага, который вы хотите проверить в условии, как указано ниже: 

next() {
    if (this.state.current === 0) {
        this.props.form.validateFieldsAndScroll(["first"], (err, values) => {
            if (!err) {
                const current = this.state.current + 1;
                this.setState({ current });
            }
        });
    } else if (this.state.current === 1) {
        this.props.form.validateFieldsAndScroll(["second"], (err, values) => {
            if (!err) {
                const current = this.state.current + 1;
                this.setState({ current });
            }
        });
    }
}

Я создал рабочую демонстрацию .

...