0

我根据沙盒链接创建了一个表单：https ://codesandbox.io/s/rlmv6ojjyn

在 SOW Type 部分有三个复选框。单击复选框时，用户可以访问更多选项（尚未创建这些选项，但第一个选项将需要一组下拉菜单，第三个选项公开一个新复选框（单击第一个），它将（单击）然后将公开一些文本框供用户提交文本。

根据'SOWType.js'（如下所示）中的代码，我已经到了这一点，它是'PdfGenFormContainer.js'的子级。

我有一个对象“componentList”（在 SOWType.js 内），它与条件渲染一起使用，以在相关复选框选择上显示相关子组件）

我的问题是，如何将这些子组件中的用户选择包含在状态中。对象“componentList”在子组件中，那么这一切如何与父组件中的状态通信？（所以提交表格时都包括在内）？。'componentList' 是否需要以某种方式坐在父级中？（这将如何工作？）

我唯一的选择是使用 redux 来完成这项工作，还是可以简单地在 React 中完成？

SOWType.js：

import React from "react";
import ProdSOWExtOptions from "./ExtendedOptions/ProdSOWExtOptions";
import TeradataExtOptions from "./ExtendedOptions/TeradataExtOptions";
import CustomProfExtOptions from "./ExtendedOptions/CustomProfExtOptions";

class SOWType extends React.Component {
  componentList = {
    ProductSow: <ProdSOWExtOptions type={this.props} />,
    "Teradata Customer SOW": <TeradataExtOptions />,
    "Custom Professional Services SOW": <CustomProfExtOptions />
  };
  render() {
    // console.log(this.props);
    return (
      <div className="form-group">
        <label htmlFor={this.props.name} className="form-label">
          {this.props.title}
          <h6>{this.props.subtitle}</h6>
        </label>
        <div className="checkbox-group">
          {this.props.options.map(option => {
            return (
              <label key={option}>
                <input
                  className="form-checkbox"
                  name={this.props.setName}
                  onChange={this.props.controlFunc}
                  value={option}
                  checked={this.props.selectedOptions.indexOf(option) > -1}
                  type={this.props.type}
                />
                {option}
                {this.props.selectedOptions.indexOf(option) > -1 ? (
                  <h5>{this.componentList[option]}</h5>
                ) : (
                  " "
                )}
              </label>
            );
          })}
        </div>
      </div>
    );
  }
}

export default SOWType;
4

0 回答 0