我想根据传递到我的功能组件中的数据动态生成一个表单。不同的数据代表不同的形式

Question

在下面的代码中，我接受了一个对象。我拉出我想用作表单标签的对象键。我写了几个不同的 for 循环 可以创建一个 const 变量数组。我的问题是构建 [idProps, idMeta] 变量以传递到我的表单中。 [idProps, idMeta] 需要为每个表单输入更改 [{label}Props, {label}Meta] useField() 很棘手。欢迎任何建议或参考其他代码。

import React, { useCallback } from 'react';
import { useField } from 'fielder';
import Form from 'react-bootstrap/Form';
import { Container, Row, Col } from 'react-bootstrap';
import BrewFormGroup from '../FormComponents/BrewFormGroup';
import BrewButton from '../Buttons/BrewButtons';


function BrewFormComponent(props) {
console.log("row ===> ",props.data);

  // Variables and const 
  const data =props.data;
  console.log(data);
  const keys = Object.keys(data);
  const test = [];

  const createVars = ()=>{
    for (let i = 0; i < keys.length; i++) {
      const element = keys[i];
      test.push(element);

    }
  }
createVars();
  const [idProps, idMeta] = useField({
    name: 'id',
    initialValue: props.data.id,
  });

  //   ========== Functions ============

// const keys = HandleData.getObjectKeysprops2(data);
  const handleSubmit = useCallback((event) => {
    
  }, []);

  const changeLocation = () => {
    alert("Submit to local storage")
    console.log("Hobnob===> "+test[2]);
  }
  
  //   =============== Return ===================

  return (
        <Container><Row className="mb-2 justify-right">
      <Col></Col><Col><BrewButton
        variant="success"
        type="submit"
        onClick={changeLocation}
        value="Submit"></BrewButton></Col>
        </Row>
        <Form autoComplete="off" onSubmit={handleSubmit}>
            <BrewFormGroup
              props={idProps}
              meta={idMeta}
              label="id"
              type="text"
            />
      </Form></Container>)
};

export default BrewFormComponent;

Answer 1

所以，我认为您可以使用 Formik 的其他功能来实现您的目标。您可以代替使用 useField 动态构建字段，而是在输出本身中映射您的道具。类似于：

return (
      <Form autoComplete="off" onSubmit={handleSubmit}>
        {Object.keys(props.data).map((key) => (
          <Field id={key} name={key} initialValue={props.data[key]} />
        )}
      </Form>

我想根据传递到我的功能组件中的数据动态生成一个表单。不同的数据代表不同的形式

I want to dynamically generate a form based on the data passed into my functional component. Different data mens different forms

javascript

reactjs

bootstrap-4

react-functional-component