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

Question

谁能帮忙，我正在 React 中尝试这个，但我真的卡住了。

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

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

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

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

到目前为止我有以下内容：

状态中的选项数组：

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>
    );
  }
}

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

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) */
    );
  }

Answer 1

如果我理解你的问题是正确的，你希望在复选框被 selected 后显示额外的子菜单，那么你可以使用条件渲染。只是 show/hide select 上的菜单或取消 select 复选框。

{ this.props.selectedOptions.indexOf(option) > -1 ? (
  <h5>submenu options component renders here</h5>
  ) : " "
}

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

How to conditionally render extra form options on checking dynamically generated check boxes in React?

checkbox

conditional

rendering

reactjs