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

Question

免责声明:我是 ReactJS、Javascript 以及更广泛的前端开发新手。

大家好，

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

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

但现在我正在努力寻找一种解决方案来检索这些组件的输入值，而无需通过编写 JS 代码的某些代码生成。

附注:我正在使用 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”属性，以便让输入知道我不知道这个字段是谁，因为我使用的是通用组件。

显然，我需要能够从我将使用它的父组件访问结果数据。

我正在考虑将所有值连接到一个字符串中，格式如“fieldName:value”，甚至直接采用 JSON 格式。

但是:我如何检索这些值？？？？？？这就是问题所在!

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

预先感谢您的帮助!

Answer 1

您可能想要使用 handleChange(name, event) 函数，然后将每个实例与 name 属性绑定(bind)。您还需要使用不变性助手(React 或任何其他助手)来修改给定动态元素的状态；

handleChange: function(name, event){
    var newState = {};
    newState[name] = event.target.value;
    this.setState(React.addons.update(this.state, {$merge: newState}));
}

...

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

然后您可以从状态访问这些值 this.state.{{label name}}