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

我在组件内部有一个表单：

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>

constmypopup=（{name，authenticity\u token}）=>{
}
// ...
>
电子邮件

您需要将此表单的数据发送到服务器。Ajax请求。单击“提交”时如何获取表单数据

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

const SendButton=（）=>(
{
常数数据=新的FormData（如目标）；
}}
className=“按钮弹出式页脚按钮”
>
Отправить
);

常量数据

为空

您需要有：

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

当

onSubmit

发送到您的表单时，而不是将其作为

onClick

发送到submit

按钮时，
按钮将负责调用表单的
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>

constmypopup=（{name，authenticity\u token}）=>{
{
e、 预防默认值（）；
常数数据=新的FormData（如目标）；
console.log（'works！'，数据）
}}
>
}
// ...
>

const SendButton=（）=>(
尝试将提交功能从按钮本身抽象出来。定义一个
handleSubmit（）
函数，并将其与表单的
onSubmit
处理程序配对。让按钮尽可能简单，您仍然可以让它执行任何可视操作或其他功能，但让表单处理实际的提交功能

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

工作沙箱：

MyPopup：
从“React”导入React；
从“/Popup”导入弹出窗口；
常量handleSubmit=e=>{
e、 预防默认值（）；
常数数据=新的FormData（如目标）；
const dataIterator=Array.from（数据）；
const postObject=dataIterator.reduce（（obj[key，value]）=>{
返回{
…obj，
[键]：值
};
}, {});
console.log（postObject）；
};
const MyPopup=（{name，authenticity\u token}）=>{
返回(
电子邮件
);
};
导出默认的MyPopup；

弹出窗口
从“React”导入React；
const Popup=props=>{
返回并提交；
};
导出默认弹出窗口；

postObject
包含表单中的所有数据，我假设这就是您希望执行请求的内容：）
您能告诉我们输入的内容是什么样的吗？upd body Question刚刚为您提供了codesandbox和工作代码。让我知道这是否有帮助。我的控制台
工作正常！FormData{}
。FormData为空again@evans您在表单中使用的组件类型是什么？它发送
{“postObject”=>{…}
，只能发送
{…}
？@evans hmmm不确定您的意思。打印postObject时，它是否具有所需的所有内容？
const SendButton = () => (
  <button
    type='submit'
    className="button popup-footer__button"
  >

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;