javascript - React Js 中的分组输入

Question

我在我的反应应用程序中使用蚂蚁设计。我有下一个表格：

const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

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

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="age"
        name="age"
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="name"
        name="name"
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="friends"
        name="friends"
      >
        <Input />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

现在，当我提交表单时，我得到一个包含所有这些输入名称的对象：{name: 'test', age: 15, friends: 5}我想要另一个数据输出，如下所示：

user: [{
  meta: {
    age: 15,
    name: 'test'
  },
  other: {
    friends: 5
  }
}]

如何使用我的代码获取最后一个输出？
演示：https ://codesandbox.io/s/basic-usage-antd4162-forked-44vq4?file=/index.js

标签： javascriptreactjs

Answer 1

您可以选择使用保存状态的局部变量。

import React,{useEffect, useState} from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Form, Input, Button, Checkbox } from "antd";
const layout = {
  labelCol: {
    span: 8
  },
  wrapperCol: {
    span: 16
  }
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16
  }
};

const Demo = () => {
  const [array,setArray]=useState([])
  useEffect(()=>{
    console.log({array})
  },[array.length])
  const onFinish = (values) => {
    console.log("Success:", values);
    let other = {friends:values.friends}
    delete values.friends
    let temp_arr = [...array]
    temp_arr.push({meta:values, other})  
    setArray(temp_arr)
};

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

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item label="age" name="age">
        <Input />
      </Form.Item>
      <Form.Item label="name" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="friends" name="friends">
        <Input />
      </Form.Item>
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

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