React Js 中的分组输入

IT技术 javascript reactjs
2021-05-09 23:21:28

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

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

3个回答

您可以选择具有保存状态的局部变量。

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

您可以在设置状态时使用这些值并将它们更改为所需的值。

const [userData, setUserData] = useState({}); // initialize state variable

const onFinish = (values) => {
  setUserData([{
    meta: {
      age: values.age, // set [0]meta.age to values.age
      name: values.name // and so on
    },
    other: {
      friends: values.friends
    }
  }]);
};

这将输出

[{
  meta: {
    age: "22"
    name: "Someone"
  },
  other: {
    friends: "5"
  }
}]

在此处更新了沙盒链接

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

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

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

其它你可能感兴趣的问题
上一篇3D打印骰子公平吗？ 下一篇陀螺填充的优点是什么？