Не могу отправить форму из-за 2ух кнопок c type='submit' в ней

Question

Я использую реакт с хуком useForm. Мне нужно сделать так, что бы когда я сабмитил форму, я мог понять с помощью какой кнопки она отправляется "Войти" или " Зарегистрироваться" и уже в зависимости от этого отправлял запрос с разными методами входа или регистрации.

форма

И вот код который её делает

На данный момент в метод onSubmit приходит только данные формы. Было бы не плохо что бы с этими данными приходило и name кнопки. Или если это не возможно, буду благодарен если подскажите другой подход.

Answer 1

функция onSubmit принимает вторым аргументом event, от туда можете извлечь источник отправки формы. Вот пример

function App() {
  const { register, handleSubmit, watch, errors } = useForm();

  const loginBtn = useRef(null);
  const registerBtn = useRef(null);

  const onSubmit = (data,event) =>{
    if(event.nativeEvent.submitter === loginBtn.current){
      console.log('LOGIN',data);
    } 
    else if(event.nativeEvent.submitter === registerBtn.current){
      console.log('REGISTER',data);
    } 
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Example</label>
      <input name="example" defaultValue="test" ref={register} />
      <label>ExampleRequired</label>
      <input
        name="exampleRequired"
        ref={register({ required: true, maxLength: 10 })}
      />
      {errors.exampleRequired && <p>This field is required</p>}
      <button ref={loginBtn} type="submit">Войти</button>
      <button ref={registerBtn} type="submit">зарегистрироваться</button>
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

БЛОГ НА HUSL

Не могу отправить форму из-за 2ух кнопок c type='submit' в ней

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