0

Использую React и библиотеку redux-form. Хочу сделать форму, которая будет отправляться по событию onBlur. Есть компонент:

const UpdateTargetForm = ({handleSubmit, error, close}) => {
    return (
        <form onSubmit={handleSubmit}>
            <Field name={"field"} component={"input"} onBlur={???}/>
        </form>
    )
}

Какую функцию написать в onBlur, чтобы происходила отправка формы?

1 ответ 1

0

Какую функцию написать в onBlur, чтобы происходила отправка формы?

Функцию отправки формы которую вы написали на одну строку выше.

<form onSubmit={handleSubmit}>
     <Field name={"field"} component={"input"} onBlur={handleSubmit/>
</form>

Вот рабочий код без библиотеки:

export default function App() {
  const [value, setValue] = useState("");
  const submitForm = (e) => {
    e.preventDefault();

    console.log("submits", value);
  };
  return (
    <div className="App">
      <form onSubmit={submitForm}>
        <input
          {...{ value }}
          onBlur={submitForm}
          onChange={(e) => setValue(e.target.value)}
        />
      </form>
    </div>
  );
}

UPD Пример с redux-form Codesandbox

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

let App = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("submit");
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <Field name={"field"} component={"input"} onBlur={handleSubmit} />
      </form>
    </div>
  );
};

export default App = reduxForm({
  form: "contact"
})(App);
6
  • Увы, но <Field name={"field"} component={"input"} onBlur={handleSubmit}/> не работает к сожалению. У вас работало? Может быть я ошибку где-то допустил (хотя вроде нет)
    – Zhenyria
    14 июн 2021 в 7:51
  • @Zhenyria обновил ответ, добавил пример с redux-form все работает. Проверьте, пожалуйста.
    – Randall
    14 июн 2021 в 8:17
  • А, я понял. Вы используете собственную функцию handleSubmit. В принципе вариант-то хороший, я просто использовал handleSubmit, который мне даёт redux-form, вот с ним почему-то не работало
    – Zhenyria
    14 июн 2021 в 8:23
  • В принципе-то тогда лучше буду использовать ваш вариант без библиотеки. Выигрыша от redux-form в данном случае всё равно нет.
    – Zhenyria
    14 июн 2021 в 8:24
  • @Zhenyria если хотите использовать библиотеку советую react-hook-form.Я использовал практически все популярные библиотеки для работы с формами и мне понравилось только react-hook-form.
    – Randall
    14 июн 2021 в 8:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.