Как условно отобразить дополнительные параметры формы при проверке динамически генерируемых флажков в React? - PullRequest
Новая
       7

Как условно отобразить дополнительные параметры формы при проверке динамически генерируемых флажков в React?

0 голосов
/ 12 декабря 2018

Может кто-нибудь помочь, я пытаюсь это сделать в 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 флажка, но я не знаю, как добавить условный рендеринг, чтобы при щелчке флажков появлялись вложенные блоки, и добавил выбранную из них информацию в состояние.

т.е. я могу только добавить условный рендеринг на флажки, которые НЕ были динамически отрисованы с карты, или есть способ сделать это, и в таком случае, как это сделать?

Мой код пока такой, как показано ниже,может быть не лучшая настройка для того, что я пытаюсь сделать:

Может кто-нибудь помочь ??

Это ссылка на компонент в родительском элементе с пропущенными реквизитами: 

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

1 Ответ

0 голосов
/ 12 декабря 2018

Если я правильно понимаю ваш вопрос, вы хотите, чтобы дополнительное подменю отображалось после того, как флажок установлен, тогда вы можете использовать условный рендеринг.Просто покажите / скройте меню при выборе или снятии флажка, например, так. 

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