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

尝试从按钮本身抽象出提交功能。定义一个+--------+-----+----+-----+--+ | id | a | b | c | +--------+-----+----+-----+--+ | 10011 | 10 | 3 | 0 | | 10012 | 50 | 3 | 10 | | 10013 | 19 | 0 | 40 | | 10014 | 10 | 3 | 0 | | 10015 | 70 | 3 | 0 | | 10016 | 17 | 0 | 40 | | 10017 | 9 | 0 | 40 | +--------+-----+----+-----+--+函数，并将其与表单的handleSubmit()处理函数配对。让按钮尽可能简单，您仍然可以使它执行任何视觉操作或其他功能，但让表单处理实际的提交功能。

您可以执行以下操作从表单中提取数据：

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

MyPopup：

onSubmit

弹出

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;包含表单中的所有数据，我假设这是您要执行的请求：）

Answer 2

您需要具备以下条件：

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

作为您表单的onSubmit，而不是提交onClick的{{1}}，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>

单击时如何从表单获取数据？

2 个答案:

MyPopup：

弹出