具有一个主下拉菜单的多个下拉菜单实现

有多种方法可以实现这一目标，但是我现在想到的最简单的方法是

因为您有3个下拉菜单（在这种情况下），所以您需要为每个下拉菜单保持3个条目的状态

这样保持你的状态

{
  primaryDropdown: 'selected option',
  secondaryDropdowns: ['selected value for first', 'selected value for second']
}

我保留数组，因为您可以动态更改辅助下拉列表的数量

现在onChangeHandler主下拉菜单将如下所示

primaryOnChangeHander(selected) {
 this.setState(prevState => {
  const newState = { 
    ...prevState,
    primaryDropdown: selected,
    secondaryDropdowns: prevState.secondaryDropdowns.map(item => selected )
  };
  return newState;
 })
}

当主要下拉列表发生变化时，您还将更新主要下拉列表和次要下拉列表

和onChangeHander二次下拉的样子

 secondaryOnChangeHander (selected, indexOfDropdown) {
  this.setState(prevState => ({
    ...prevState,
    secondaryDropdowns: prevState.secondaryDropdowns.map((item, index) => {
      if (index === indexOfDropdown) {
        return selected;
      } else {
       return item;
      }
    })
  }))
}

当辅助下拉列表值更改时，您仅更新该垂直下拉列表值

您的代码现在将如下所示

/* important note here: assuming that insuranceVariants is a fixed length array */
class LeagueCard extends Component {

  state = {
    /* better would be to create a variable for `this.props.cardContent.insuranceVariants[0]` and use that */
    primaryDropdown: this.props.cardContent.insuranceVariants[0],
    secondaryDropdowns: [this.props.cardContent.insuranceVariants.map(item => this.props.cardContent.insuranceVariants[0]]
  };

  createOptions = (arr) => {
    return arr.map(item => ({label: item, value:item}))
  };

  primaryOnChangeHander(selectedValue) {
    this.setState(prevState => {
      const newState = { 
        ...prevState,
        primaryDropdown: selectedValue,
        secondaryDropdowns: prevState.secondaryDropdowns.map(item => selectedValue)
      };
      return newState;
    })
  }

  secondaryOnChangeHander (selectedValue, indexOfChangedDropdown) {
    this.setState(prevState => ({
      ...prevState,
      secondaryDropdowns: prevState.secondaryDropdowns.map((item, index) => {
        if (index === indexOfChangedDropdown) {
          return selectedValue;
        } else {
          return item;
        }
      })
    }));
  }

  render() {
    const {
      cardIndex, cardContent: {
        insuranceVariants,
        price,
      },
    } = this.props;


    const insuranceOptions = this.createOptions(insuranceVariants);


    return (
      <>
        <div className={styles.header}>
          <h4>League {cardIndex + 1}</h4>
          <h4>Total {price.reduce((a, b) => a + b)} PLN</h4>
        </div>
        <div className={styles.defaultDropDownWrapper}>
          <p>Default variant of the insurance program</p>
          <Dropdown //MAIN DROPDOWN WORKS PERFECTLY
            value={this.state.primaryDropdown}
            options={insuranceOptions}
            onChange={e => {
              this.primaryOnChangeHander(e.value);
            }}
          />
        </div>
        <table>
          <thead>
            <tr>
              <th className={styles.columnName}>#</th>
              <th className={styles.columnName}>FIRST AND LAST NAME</th>
              <th className={styles.columnName}>AGE</th>
              <th className={styles.columnName}>VARIANT OF THE INSURANCE PROGRAM</th>
            </tr>
          </thead>
          <tbody>
            {insuranceVariants.map((item, index) =>
            <tr key={index} className={(index + 1) % 2 === 0 ? styles.evenTabStyle : styles.baseTabStyle}>
              <td>{index + 1}</td>
              <td>Jan Nowak</td>
              <td>20</td>
              <td>
                <Dropdown //SECONDARY DYNAMICALLY DROPDOWNS WITH TROUBLES
                  value={this.state.secondaryDropdowns[index]}
                  options={insuranceOptions}
                  onChange={e => {
                    this.secondaryOnChangeHander(e.value, index);
                  }}
                />
              </td>
            </tr>)}
          </tbody>
        </table>
      </>
    );
  }
}