Как отправлять форму без кнопки submit?

Question

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

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

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

Answer 1

Какую функцию написать в 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);

БЛОГ НА HUSL

Как отправлять форму без кнопки submit?

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