Блог

Вероятно, это проблема с привязкой, но я, похоже, не могу найти причину.

Случается, что я использую ReactJS для создания компонента формы, который должен отправляться, когда для параметра «shouldSubmit» установлено значение true. Тем не менее, когда я пишу приведенный ниже код, я не могу получить правильную цепочку событий, и «submitHandler» никогда не выполняется:

obs: что касается useRef, я гарантирую, что компонент всегда будет смонтирован при вызове события отправки, так что здесь нет проблем.

 import React, { useRef } from 'react'

import classes from './CreateEventForm.module.css'

const CreateEventForm = ({ shouldSubmit }) => {
  const form = useRef(null)
  const title = useRef(null)
  const desc = useRef(null)
  const price = useRef(null)

  const submitHandler = () => {
    console.log('entered submitHandler')
  }

  if (shouldSubmit){
    form.current.submit()
  }

  return (
    <form ref={form} className={classes.Form} onSubmit={(e)=>{submitHandler(e)}}>
    <div className={classes.FormControl}>
      <label htmlFor='title'>Título</label>
      <input type='text' id='title' ref={title}/>
    </div>
    <div className={classes.FormControl}>
      <label htmlFor='desc'>Descrição</label>
      <input type='text' id='desc' ref={desc}/>
    </div>
    <div className={classes.FormControl}>
      <label htmlFor='price'>Preço</label>
      <input type='text' id='price' ref={price}/>
    </div>
  </form>
  );
};

export default CreateEventForm;
 

Сначала я подумал, что достаточно просто использовать анонимную функцию для события «onSubmit» формы, чтобы сделать это правильно, когда произошло событие отправки. Но сейчас я сильно чувствую, что проблема в том, что мне нужно привязать «form.current.submit» к «этому», прежде чем вызывать его, но отсутствие опыта мешает мне это сделать. Какая-нибудь помощь?

Я мог бы получить ожидаемые результаты с помощью следующего обходного пути, но мне бы очень хотелось понять, в чем я ошибаюсь в первом коде.

 import React, { useRef } from 'react'

import classes from './CreateEventForm.module.css'

const CreateEventForm = ({onSubmit, shouldSubmit}) => {
  const form = useRef(null)
  const title = useRef(null)
  const desc = useRef(null)
  const price = useRef(null)

  const submitHandler = () => {
    console.log('entered submitHandler')
  }

  if (shouldSubmit){
    submitHandler()
  }

  return (
    <form ref={form} className={classes.Form}>
    <div className={classes.FormControl}>
      <label htmlFor='title'>Título</label>
      <input type='text' id='title' ref={title}/>
    </div>
    <div className={classes.FormControl}>
      <label htmlFor='desc'>Descrição</label>
      <input type='text' id='desc' ref={desc}/>
    </div>
    <div className={classes.FormControl}>
      <label htmlFor='price'>Preço</label>
      <input type='text' id='price' ref={price}/>
    </div>
  </form>
  );
};

export default CreateEventForm;
 

Я был бы признателен за любую информацию!