SyntheticEven при сабмите redux-form

Question

При сабмите данной формы перезагружается страница, и в values отправляется SyntheticEven, господа, прошу помогите разобраться в чем может быть проблема. Сам store настроен правильно, и более того, в него отправляются данные формы. Но сабмит не работает.

import React from "react";
import { Field, FieldArray, reduxForm } from "redux-form";

import { useEffect } from "react";


const PhrasesFieldArray = (props) => {
  // const savedphrases = props.savedphrases;
  let savedmembers = [];
  // let phrases = props.phrases;

  // if (phrases && phrases.values && phrases.values.members) {
  //   savedmembers = phrases.values.members;
  // }

  const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div>
      <label>{label}</label>
      <div>
        <input {...input} type={type} placeholder={label} />
        {touched && error && <span>{error}</span>}
      </div>
    </div>
  );

  const renderHobbies = ({ fields, meta: { error } }) => (
    <div>
      <button type="button" onClick={() => fields.push()}>
        Add
      </button>

      {fields.map((hobby, index) => (
        <div key={index}>
          <div>
            <div>
              <label>фраза {index + 1}</label>
              <Field name={hobby} component={renderField} />
            </div>
            <button
              type="button"
              title="Remove Phrases"
              onClick={() => fields.remove(index)}
            >
              delete
            </button>
          </div>
        </div>
      ))}
      {error && <li className="error">{error}</li>}
    </div>
  );

  const { pristine, reset, submitting, initialize } = props;

  const handleSubmit = (values) => {
    console.log(values)
    debugger
  };

  useEffect(() => {
    // initialize({ field1: "val1", members: savedphrases });



  }, []);

  const saveValues = () => {
    props.addPhrases(savedmembers);
  };

  return (
    <form onSubmit={handleSubmit}>
      <FieldArray name="members" component={renderHobbies} />
      <div>
        <button type="submit" disabled={pristine || submitting}>
          asd
        </button>
        <button onClick={saveValues}>Save Values</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Cancel
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "fieldArrays", // a unique identifier for this form
})(PhrasesFieldArray);

Answer 1

onsubmit - это событие, вы назначаете обработчик события handleSubmit, который на входе получает не данные формы, а Event (SyntheticEvent является оберткой React`а).

Для некоторых событий у браузеров есть поведение по умолчанию, например, клик по ссылке -> переход на другую страницу, или в вашем случае form -> submit -> отправить форму, что и вызывает перезагрузку страницы.

Если нужно поведение по умолчанию не выполнять, то в обработчике (в вашем случае это handleSubmit) используется ф-я preventDefault (см. пример ниже).

document.querySelector('.form-prevent').onsubmit = (event) => {
  event.preventDefault()
  /* Здесь данные, которые форма будет отправлять из эвента, вытаскиваются из эвента, 
  но, т.к. вы работает в React, вы можете их получать из стейта компонента формы, 
  если, конечно, они у вас в стейте хранятся. */
  let { value } = event.currentTarget.message; 
  console.log(value)
}

<form class="form-prevent">
  <input type="text" name="message" />
  <input type="submit" />
</form>

Можете подробней почитать о html формах

БЛОГ НА HUSL

SyntheticEven при сабмите redux-form

Ответы (1 шт):