Question

不确定标题是否说明我想要实现的目标，否则请更正我。所以基本上我想做一个基于json文件创建表单的组件。假设有人单击导航栏“ light”，我希望创建一个适合json文件中属于“ light”的字段的表单。我已经用代码实现了，该解决方案可以在以后添加更多模块时节省大量工作，因为它们将基于json动态创建，而不是为每种表单单独创建组件。但是我想问你们一些建议，因为我不知道如何在这里实现管理状态。我的意思是填写表格后，我想通过发送按钮发送它。问题是，首先我要在某个状态下收集数据。但是，如果我基于json创建表单，那么状态每次都会具有不同的字段。有没有在不首先定义文本字段的情况下创建和更新状态的方法？我的代码：

import React from 'react'
import { Typography, FormControl, TextField, FormControlLabel, Button} from "@material-ui/core";
import fakeModule from "./fakeModule"
import { connect } from "react-redux";


function SetModule(props) {
    return(
        <div>
        {props.settedModule 
        ? Object.entries(fakeModule).map(([key, val], i) => {
            if (props.settedModule == key) {
                console.log(val)
                return (
                <FormControl key={i}>
                    <Typography>{props.moduleConfig}</Typography>
                    {Object.entries(val).map(([name, value], index) => {
                        return (
                        <FormControlLabel
                            key={index}
                            control={
                                <TextField
                                    label={value}
                                    margin="normal" />
                            }
                            label={name} />
                        )
                    })}
                </FormControl>
                )
            }
        })
        : <div>Set Module first</div>}
        </div>
    )
}

const mapStateToProps = state => {
    return {
        settedModule: state.settedModule
    }
}

export default connect(mapStateToProps)(SetModule)

这是我的JSON对象的示例，后面我要添加带有电池等参数的新模块：

const moduleData = {
  light: {
      intensity: "20",
      threshold_on: "7",
      threshold_off: "19",
      mode: "ON",
      measurement_period: "1",
      measurement_state: "1",
      filter: "3",
      range: "0"
  },
  sleep: {
    SLEEP_TIME: 120,
    MODULE_PRIORITY: 999
  }
};

export default moduleData

Answer 1

我认为React-jsonschema对您来说可能是一个很好的解决方案

文档：React-jsonschema doc

以下代码允许使用jsonschema模块从json生成简单表单。您的json必须按照link

上的示例进行构造

import React from 'react';
import Form from "react-jsonschema-form";

const data={
    title: "A single-field form",
    type: "string"
  }

class TestJsonschema extends React.Component{
    constructor(props){
        super(props);
        this.Submission=this.Submission.bind(this);
    }
    Submission(value){
        console.log(value.formData) 
    }
    render(){
        return(
            <Form schema={data} uiSchema={{}} onSubmit={this.Submission}>

            </Form>              
        )
    }
}

export default TestJsonschema

通过TextFields动态创建和更新状态

1 个答案: