reactjs - 如何在 React 中检查动态生成的复选框时有条件地呈现额外的表单选项？

问题描述

任何人都可以帮忙，我正在 React 中尝试这个，但我真的被卡住了。

我在子组件上有 3 个复选框，我使用状态中的一组选项（在父组件中）动态呈现了这些复选框：

我需要做的是，如下图所示：单击每个复选框并获得更多选项。

https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/d/3/d385407399b0fa130741e653c9650ff9953282df.png

选中的选项和子选项（不仅仅是下拉菜单，第三个复选框有输入字段）都需要在状态下可用，以便我可以收集它们并将它们发布到数据库

到目前为止我所拥有的是以下内容：

状态中的选项数组：

sowType: [
        "ProductSow",
        "Teradata Customer SOW",
        "Custom Professional Services SOW"
      ]

最终渲染的复选框：

https://discourse-user-assets.s3.dualstack.us-east-1.amazonaws.com/original/3X/4/5/45702836b84abe764917f4bdf5172258f4d3e39c.png

我的问题是，我不知道下一步该做什么。我已经动态渲染了最初的 3 个复选框，但我不知道如何添加条件渲染以使子框在单击复选框时出现）并将从中选择的信息添加到状态。

即我可以只在尚未从地图动态呈现的复选框上添加条件呈现，还是有办法做到这一点，在这种情况下如何完成？

到目前为止，我的代码如下，它可能不是我想要做的最好的设置：

有人可以帮忙吗？？

这是对父组件的引用，其中传递了 props：

<SowType
            title={"SOW Type"}
            setName={"SOW Type"}
            subtitle={"What type of SOW do you want to generate?"}
            type={"checkbox"}
            controlFunc={this.handleSOWTypeCheckbox}
            options={this.state.sowType}
            selectedOptions={this.state.sowTypeSelectedOption}
          />

这是子组件从状态动态渲染项目数组：

    class SOWType extends React.Component {
  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}
              </label>
            );
          })}
        </div>
      </div>
    );
  }
}

这是我当前在父组件中单击复选框时在父组件中使用的方法（这基本上从处于状态的数组中获取选定的选项，并将选中的选项放入另一个名为“sowTypeSelectedOption：[]”的数组中，

handleSOWTypeCheckbox(e) {
    const newSelection = e.target.value;
    let newSelectionArray;

    if (this.state.sowTypeSelectedOption.indexOf(newSelection) > -1) {
      newSelectionArray = this.state.sowTypeSelectedOption.filter(
        item => item !== newSelection
      );
    } else {
      newSelectionArray = [...this.state.sowTypeSelectedOption, newSelection];
    }
    this.setState(
      {
        sowTypeSelectedOption: newSelectionArray
      } /*() =>
      console.log("sow Type Selection: ", this.state.sowTypeSelectedOption) */
    );
  }

标签： reactjscheckboxconditionalrendering

reactjs - 如何在 React 中检查动态生成的复选框时有条件地呈现额外的表单选项？

问题描述

解决方案

推荐阅读