Question

我已经按照沙盒链接https://codesandbox.io/s/rlmv6ojjyn

创建了一个表单

在“ SOW类型”部分中，有三个复选框。单击复选框后，用户可以访问其他选项（尚未创建这些选项，但是第一个选项将需要一组下拉菜单，第三个选项将显示一个新的复选框（单击第一个复选框），该复选框将在单击时显示然后将显示一些文本框供用户提交文本。

至此，我已经按照“ 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;

反应：如何将子组件（向下2级）中的有条件渲染的额外选项添加到状态中？

0 个答案: