Question

免责声明：我是ReactJS，Javascript的新手，更常见的是前端开发。

大家好，

我决定构建一个通用组件来处理我将基于给定模板在项目中使用的所有表单。

生成非常简单：我在Json中循环我的模板并创建我需要的组件。

但是现在我很难找到一个解决方案来检索这些组件的输入值，而不需要通过编写JS代码的代码生成。

p.s。：我正在使用Material UI组件。

以下是模板示例：

{ label: "General information",
                        elements: [ { label: "Firstname",
                                      element: "textfield",
                                      element_info: []
                                    },
                                    { label: "Lastname",
                                      element: "textfield",
                                      element_info: []
                                    },
                                    { label: "Email",
                                      element: "textfield",
                                      element_info: []
                                    },
                                    { label: "Password",
                                      element: "textfield",
                                      element_info: []
                                    },
                                    { label: "Phone number",
                                      element: "textfield",
                                      element_info: []
                                    }
                                  ]
                      },

到目前为止，这是我的代码：

render: function() {
    var formPattern = this.props.form;
    var form = [];

    for (var paper in formPattern) {
      var elements = formPattern[paper].elements;
      var paper = [];

      for (var element in elements) {
        var label = elements[element].label;

        if (elements[element].element == "selectfield") {
          var element_info = elements[element].element_info;
          var items = [];

          for (var i = 0; i < element_info.length; i++) {
            items.push(<MenuItem value={i+1} primaryText={element_info[i]} />);
          }

          paper.push( <SelectField>
                        {items}
                      </SelectField>);

        } else if (elements[element].element == "toggle") {
          paper.push(<Toggle label={label} />);

        } else if (elements[element].element == "checkbox") {
          paper.push( <Checkbox
                        label={label}
                        style={checkboxStyle}
                    />);

        } else {
          paper.push(<TextField hintText={label} />);
        }
      }

      form.push(<Paper style={paperStyle}>
                  {paper}
                </Paper>);
    }

    return (
      <div>
        {form}
        <FlatButton
          label="Create"
          onTouchTap={this.props.onNewClick}
        />
      </div>
    );

因此，如果我们只专注于TextField组件，我需要添加一个“onChange”属性，以获得输入知道我不知道这个字段是谁，因为我在一个通用组件上。

Obvioulsy我需要能够从我将要玩它的父组件中访问结果数据。

我在考虑将单个字符串中的所有值与“fieldName：value”等格式连接起来，甚至直接以JSON格式连接。

但是：我如何检索这些值??????这是个问题！

我在这里。我一直在寻找解决方案几个小时，你们是我的最后一次机会/ o /

提前感谢您的帮助！

Answer 1

您可能希望使用handleChange: function(name, event){ var newState = {}; newState[name] = event.target.value; this.setState(React.addons.update(this.state, {$merge: newState})); }函数，然后使用name属性绑定每个实例。您还需要使用不变性助手（React或其他任何一个）来修改给定动态元素的状态;

    } else {
      paper.push(<TextField hintText={label} onChange={this.handleChange.bind(this, elements[element].label)}/>);
    }

...

this.state.{{label name}}

然后您可以从状态ObjectMapper mapper = new ObjectMapper(); ShipData[] shipDataArray = mapper.readValue(jsonFile2, ShipData[].class); //then you can look through the array System.out.println("______________ History_________"); for(int x=0; x < shipDataArray.length(); x++){ shiphistory = shipDataArray[x]; System.out.println("Ship Name : " + shiphistory.getName()); System.out.println("Ship MMSI : " + shiphistory.getMmsi()); System.out.println("Ship Type : " + shiphistory.getShipType()); System.out.println("Ship Departure : " + shiphistory.getTimeLastUpdate()); //just a separating line (not necessary - just to separate the shipdata items System.out.println("-----------------------------------------------------"); }

访问这些值

Answer 2

我使用JSON-Schema为React构建了基于Material UI的动态表单组件

表单可以从服务器端呈现，也包含内置验证规则＆amp;使用bootstrap网格进行布局构建

Github Repo：https://github.com/ajainvivek/react-aztec

使用交互式编辑器构建动态表单：http://ajainvivek.github.io/react-aztec/#/playground

希望这个图书馆帮助某人

干杯

是否可以动态处理动态创建的组件的输入？

2 个答案: