React Formik привязать нажатие внешней кнопки с функцией onSubmit в <Formik> - PullRequest
Новая
       50

React Formik привязать нажатие внешней кнопки с функцией onSubmit в <Formik>

0 голосов
/ 11 марта 2019

Я пытаюсь отправить форму, используя внешние кнопки, расположенные вне тегов <Form> или <Formik>

Как показано на следующем снимке экрана, моя кнопка находится в Bootstrap> Modal Footerраздел, и они находятся за пределами тега формы.Я пытаюсь отправить форму, когда пользователь нажимает кнопку Submit.

enter image description here

Пожалуйста, смотрите код, подобный следующему.Я загрузил его на CodeSandbox .

function App() {
      return (
        <div className="App">
          <Formik
            initialValues={{
              date: '10/03/2019',
              workoutType: "Running",
              calories: 300
            }}
            onSubmit={values => {
              console.log(values);
            }}
            render={({ values }) => {
              return (
                <React.Fragment>
                  <Form>
                    Date: <Field name="date" />
                    <br />
                    Type: <Field name="workoutType" />
                    <br />                
                    Calories: <Field name="calories" />
                    <br />  
                    <button type="submit">Submit</button>
                  </Form>
                  <hr />
                  <br />
                  <button type="submit" onClick={() => this.props.onSubmit}>
                    Button Outside Form
                  </button>
                </React.Fragment>
              );
            }}
          />
        </div>
      );
    }

Поскольку кнопка находится за пределами формы, она не вызывает поведение отправки, и я не знаю, как связать действие этой кнопки и метод Formik OnSubmit.Если я переместил эту кнопку внутрь тега формы, она работает, как и ожидалось, и мне не нужно делать ничего особенного.

Я пытался следить за публикацией этого SO Реагировать Formik использовать submitForm за пределами .Но я действительно не мог понять, как это работает.

Я пытался связать действие нажатия кнопки, как onClick={() => this.props.onSubmit}, как упомянуто в посте.Но он ничего не делает или выдает ошибку.

Не могли бы вы помочь мне, как я могу связать кнопку «Отправить» вне формы с функцией «OnSubmit» в Formik?

Ответы [ 3 ]

1 голос
/ 11 марта 2019

Похоже, у вас есть доступ к методу submitForm как свойство аргумента, переданного функции render.Просто вызовите это с помощью обработчика button onClick ... 

render={({ submitForm, ...restOfProps}) => {
    console.log('restOfProps', restOfProps);

    return (
        <React.Fragment>
            <Form>
            Date: <Field name="date" />
            <br />
            Type: <Field name="workoutType" />
            <br />                
            Calories: <Field name="calories" />
            <br />  
            <button type="submit">Submit</button>
            </Form>
            <hr />
            <br />
            <button type="submit" onClick={submitForm}>
            Button Outside Form
            </button>
        </React.Fragment>
    );
}}
1 голос
/ 11 марта 2019

рендер Formik дает вам параметр обратного вызова handleSubmit.Присвойте это <button.

Поскольку ваш button не находится в форме, измените его тип на <button type="button"... и присвойте onClick onClick={handleSubmit}

Обновите рендер какследуй, 

render={({ values, handleSubmit }) => {
  return (
    <React.Fragment>
      <Form>
        Date: <Field name="date" />
        <br />
        Type: <Field name="workoutType" />
        <br />
        Calories: <Field name="calories" />
        <br />
        <button type="submit">Submit</button>
      </Form>
      <hr />
      <br />
      <button type="button" onClick={handleSubmit}>
        Button Outside Form
        </button>
    </React.Fragment>
  );
}}
1 голос
/ 11 марта 2019

Это потому, что функция handleSubmit никогда не вызывается, замените onClick={() => this.props.onSubmit} на onClick={props.handleSubmit}

edit: поскольку похоже, что вам нужно немного больше указаний, вот отредактированная версия изолированной программной среды связанного кода, правильная опора - handleSubmit, и вам нужно деструктурировать ее из подпорок, как вы делали со значениями.

https://codesandbox.io/s/qz2jnlp929

...