React Semanti c UI не может отправить форму внутри Modal - PullRequest
Новая
       6

React Semanti c UI не может отправить форму внутри Modal

1 голос
/ 02 августа 2020

Я пытаюсь создать модальное окно, в котором люди могут отправлять форму, используя React semanti c UI. Почему-то кнопка отправки не работает, и ответы не отправляются в Google Form, хотя я добавил action={GOOGLE Form URL}. Вот часть кода, и я надеюсь, что кто-то сможет понять, почему. Событие нажатия на кнопку работает, потому что оно что-то регистрирует, если я добавляю console.log()

  const GOOGLE_FORM_ENDPOINT = "http~~~"

return (
    <Modal open={isModalOpen} as={Form}>
      <Modal.Header>
        この製品の改善のためにアンケート調査のご協力をお願いします。
      </Modal.Header>
      {/* <Header
        icon="pencil"
        content="この製品の改善のためにアンケート調査のご協力をお願いします。"
        as="h2"
      /> */}
      <Modal.Content>
        <Form action={GOOGLE_FORM_ENDPOINT}>
          <Form.Field>
            <label htmlFor="game">他にプレイしたいゲームはありますか？</label>
            <input
              id="game"
              name="entry.1294001289"
              placeholder="ポーカー、人狼、人生ゲーム・・・"
              required
            ></input>
          </Form.Field>
          <Form.Field>
            <label htmlFor="price">
              今遊んだゲームに買い切りでいくら払いますか？（10円単位でお願いします。）
            </label>
            <input
              id="price"
              type="number"
              name="entry.1184266257"
              placeholder="5000"
              min="0"
              step="10"
              required
            />
          </Form.Field>
          <Form.Field>
            <label htmlFor="request">
              その他、何かご要望やご意見があればお願いします。
            </label>
            <textarea id="request" name="entry.656434793"></textarea>
          </Form.Field>
          <Form.Button
            content="submit"
            onClick={(e) => {
              e.preventDefault()
              setIsModalOpen(false)
              app?.endGameRequest()
            }}
          ></Form.Button>
        </Form>
      </Modal.Content>
    </Modal>
  )

1 Ответ

0 голосов
/ 02 августа 2020

Когда вы вызываете e.preventDefault(), вы запрещаете браузеру делать то, что должно делать - отправляйте form.

У вас есть 2 варианта отправки формы:

  1. Удалите e.preventDefault() и позвольте браузеру сделать свое волшебство c. Недостаток: браузер перенаправит пользователя на URL-адрес действия. Вероятно, это не тот опыт, который вы хотите для своих пользователей. Это приводит ко второму варианту.
  2. Запретить отправку формы с помощью e.preventDefault(), но отправить form с помощью ajax - например, fetch.
...