單擊時如何從表單獲取數據？

Question

我在組件內部有表格：

const MyPopup = ({ name, authenticity_token }) => {
  <form className="new_review" id="new_review" action="/reviews" acceptCharset="UTF-8" method="post">
    <input name="utf8" type="hidden" value="✓" />
    <input type='hidden' name='authenticity_token' value={authenticity_token} />
    <input value="2" type="hidden" name="review[reviewable_id]" id="review_reviewable_id" />
    <Popup
      // ...
      footer={
        <SendButton
          onClick={() => {
            setMessageShown(true);
          }}
        />
      }
      // ...
    >
    <div className="input-group input-group_indent-b_default">
        <label className="input-group__label" name='review[email]'>email</label>
        <input className="input-group__input" name='review[email]' type="email" />
    </div>
  </form>

您需要將此表單的數據發送到服務器。 Ajax請求。 單擊提交時如何獲取表單數據？

const SendButton = () => (
  <button
    onClick={e => {
      const data = new FormData(e.target);
    }}
    className="button popup-footer__button"
  >
    Отправить
  </button>
);

const data為空

Answer 1

嘗試從按鈕本身抽象出提交功能。 定義一個handleSubmit()函數，並將其與表單的onSubmit處理函數配對。 讓按鈕盡可能簡單，您仍然可以使它執行任何視覺操作或其他功能，但讓表單處理實際的提交功能。

您可以執行以下操作從表單中提取數據：

工作沙箱： https ： //codesandbox.io/s/hardcore-austin-bhq8m

MyPopup：

import React from "react";
import Popup from "./Popup";

const handleSubmit = e => {
  e.preventDefault();
  const data = new FormData(e.target);
  const dataIterator = Array.from(data);

  const postObject = dataIterator.reduce((obj, [key, value]) => {
    return {
      ...obj,
      [key]: value
    };
  }, {});

  console.log(postObject);
};

const MyPopup = ({ name, authenticity_token }) => {
  return (
    <form
      onSubmit={handleSubmit}
      className="new_review"
      id="new_review"
      action="/reviews"
      acceptCharset="UTF-8"
      method="post"
    >
      <input name="utf8" type="hidden" value="✓" />
      <input
        type="hidden"
        name="authenticity_token"
        value={authenticity_token}
      />
      <input
        value="2"
        type="hidden"
        name="review[reviewable_id]"
        id="review_reviewable_id"
      />
      <div className="input-group input-group_indent-b_default">
        <label className="input-group__label" name="review[email]">
          email
        </label>
        <input
          className="input-group__input"
          name="review[email]"
          type="email"
        />
        <Popup />
      </div>
    </form>
  );
};

export default MyPopup;

彈出

import React from "react";

const Popup = props => {
  return <button type="submit">Submit</button>;
};

export default Popup;

postObject包含表單中的所有數據，我假設這就是您想要執行的請求:)

Answer 2

您需要具備以下條件：

    onClick={e => {
      const data = new FormData(e.target);
    }}

與onSubmit ，而不是onClick到Submit button ，該button將負責調用表單的 onSubmit回調函數，同時將按鈕的type='submit' ：

    onSubmit={e => {
      e.preventDefault();
      const data = new FormData(e.target);
      console.log('works!', data)
    }}

轉載：

const MyPopup = ({ name, authenticity_token }) => {
  <form
    className="new_review"
    id="new_review"
    action="/reviews"
    acceptCharset="UTF-8"
    method="post"
    onSubmit={e => {
      e.preventDefault();
      const data = new FormData(e.target);
      console.log('works!', data)
    }}
   >
    <Popup
      // ...
      footer={
        <SendButton
          onClick={() => {
            setMessageShown(true);
          }}
        />
      }
      // ...
    >
  </form>

const SendButton = () => (
  <button
    type='submit'
    className="button popup-footer__button"
  >