Обработка по отправке вне формы - PullRequest
Новая
       9

Обработка по отправке вне формы

0 голосов
/ 29 октября 2018

Я пытаюсь извлечь значения из формы, созданной с помощью Formik, однако я не могу получить эти значения формы из formik с помощью вызова onSubmit. Какой лучший способ получить его и обработать его на родительском компоненте?

Это компонент формы 

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
import moment from 'moment';
import Header from './Header';

moment.locale('en-gb');

const JoinForm = (props) => {
    const initialValues = {
        firstName: props.firstName || 'test'
    };


return (
    <div>

        <Formik
            initialValues={initialValues}
            onSubmit={props.onSubmit}

            // onSubmit={(values, actions) => {
            //     //console.log('this is direct from form',values)
            //     actions.setSubmitting(false);
            //     return values;
            // }}

        >
            {props => {
                const {
                    values,
                    touched,
                    isSubmitting,
                    handleChange,
                    handleSubmit,
                    handleReset,
                    handleBlur
                } = props;
                return (
                    <Form>
                        <label>First Name </label>
                        <Field
                            type="text"
                            name="firstName"
                            placeholder="First Name"
                            values={values.firstName}
                            onChange={handleChange}
                            onBlur={handleBlur}
                        />

                        <button
                            type="button"
                            type="submit"
                            disabled={!!isSubmitting}
                        >
                            Submit
                        </button>
                    </Form>

                );
            }}
        </Formik>

    </div>

);
};

export default JoinForm;

Это родительский компонент 

import JoinForm from './JoinForm';
import React from 'react';
import Header from './Header';
import { startAddAthlete } from '../actions/form';

class JoinPage extends React.Component{
    onSubmit = (athlete) => {
        console.log(athlete);

    };

    render() {
                return (
                    <div>
                        <Header />
                        <JoinForm firstName={'King'} onSubmit={this.onSubmit} />
                    </div>
                );
    }

}


export default JoinPage

Я делаю это правильно? Цель состоит в том, чтобы позволить родительскому элементу обрабатывать отправку, и, как предполагается, форму можно использовать повторно для редактирования и т. Д.

1 Ответ

0 голосов
/ 29 октября 2018

Я думаю, ваша кнопка вызывает эту проблему. Вы добавили type="button" и type="submit" на кнопку. Удаление type="button" должно исправить это. 

<button type="submit" 
        disabled={!!isSubmitting}>
        Submit
</button>

Надеюсь, это поможет.

...