Javascript 从react js中的表单获取数据

我开发了一个应用程序，用户可以在主表单标签中添加动态字段，这样他们就可以添加任意数量的字段。现在我有两个按钮：

整个表单提交

和

动态表单提交

首先点击我会得到整个数据表单，但当我点击第二个表单时，我也会得到相同的数据，但我只想从

中获取数据。点击我想进入的第二个按钮，我将获得的数据：

const onFinishDynamic=值=>{
log（“动态表单的接收值：”，值）；
};您可以获取值，但在钩子中。我已经修改了您的组件，您可以使用react的基本原则在DynamicForm上获得更新的值

您的MainForm.js看起来像

 import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button } from "antd";
import DynamicForm from "./DynamicForm";

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 }
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 }
};

const MainForm = () => {
  const [val, setVal] = React.useState({});
  const onFinish = values => {
    console.log("Success:", values);
    setVal(values.users);
  };

  const onFinishFailed = errorInfo => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: "Please input your username!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: "Please input your password!" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item>
        <DynamicForm abc={val}/>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Entire Form Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<MainForm />, document.getElementById("container"));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Form，Input，Button}；
从“/DynamicForm”导入DynamicForm；
常量布局={
labelCol:{span:8}，
包装器列：{span:16}
};
const tailLayout={
包装器列：{offset:8，span:16}
};
常量MainForm=（）=>{
const[val，setVal]=React.useState（{}）；
const onFinish=值=>{
log（“成功：”，值）；
setVal（values.users）；
};
const onFinishFailed=errorInfo=>{
日志（“失败：”，errorInfo）；
};
返回(
完整表格提交
);
};
render（，document.getElementById（“容器”）；

您的dynamicForm.js如下所示：

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button, Space } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";

const DynamicForm = (props) => {

  React.useEffect(()=>{
    console.log('Received values:-', props.abc)
  },[props.abc])


  return (
    <div>
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(field => (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    name={[field.name, "last"]}
                    fieldKey={[field.fieldKey, "last"]}
                    rules={[{ required: true, message: "Missing last name" }]}
                  >
                    <Input placeholder="Last Name" />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Dynamic form Submit
        </Button>
      </Form.Item>
    </div>
  );
};

export default DynamicForm;

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Form，Input，Button，Space}；
从“@ant design/icons”导入{MinusCircleOutlined，PlusOutlined}”；
常量动态形式=（道具）=>{
React.useffect（（）=>{
console.log（'接收值：-'，props.abc）
}，[props.abc]）
返回(
{（字段，{add，remove}）=>{
返回(
{fields.map（field=>(
{
删除（字段名称）；
}}
/>
))}
{
添加（）；
}}
块
>
添加字段
);
}}
动态表单提交
);
};
导出默认动态表单；
1-首先，我认为使用嵌套表单是违反规则的，所以您应该改变这一点

2-如果您想要表单中某些字段的信息，您可以使用状态在按钮单击功能中获取它们
如果我添加
表单
标记我获取
警告：validateDOMNesting（…）：不能显示为的后代。
但是如果我单击
主提交
按钮，我想从整个表单中获取整个数据。你有解决方案吗？你能看一下吗？这里我已经更新了答案，你可以在hooks中得到值。看看这对你是否有帮助。你可以在hook中做你在onFinishDynamic callback上尝试做的事情。如果答案有帮助，请接受并投票。谢谢：）你能看一看吗？请改变问题，它有问题，已经关闭了。你能看一看吗。如果你愿意帮忙，那就太好了