React Js 中的分组输入 [英] Group inputs in React Js

问题描述

我在我的 React 应用程序中使用了 ant 设计.我有下一个表单:

I am using ant design in my react application. I have the next Form:

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} 我想要另一个数据输出，像这样:

Now when i submit the form i get an object with all these inputs name: {name: 'test', age: 15, friends: 5} I want another output of data, like this:

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

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

How to get the last output using my code?
demo: https://codesandbox.io/s/basic-usage-antd4162-forked-44vq4?file=/index.js

推荐答案

您可以通过在提交和处理数据时轻松地做到这一点.然后你可以console.log或保存在数据库中等

You can easily do that by process the data on submit & then you can console.log or save in a database etc.

const Demo = () => {
  const processData = ({ name, age, friends }) => {
    return {
      user: [
        {
          meta: {
            age,
            name
          },
          other: {
            friends
          }
        }
      ]
    };
  }; // Step 1 - Create a helper function to process the form data

  const onFinish = (values) => {
    console.log("Success:", processData(values)); // Pass the form data to that helper function
  };

  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>
  );
};

https://codesandbox.io/s/group-ant-design-data-29ps7

如果您需要进一步的支持，请告诉我.

Let me know if you need further support.

这篇关于React Js 中的分组输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！