React Bootstrap Выпадающие предметы не обновляются при изменении состояния

Question

Использование react-bootstrap для выпадающего списка со списком флажков. Когда я нажимаю флажки, событие переключения срабатывает, но компонент не отображается, и флажок не изменяется.

Вот раскрывающийся компонент:

type Props = {
  checkboxList: Array<string>;
  title: ReactNode;
  activeCheckboxes: Array<string>;
  onToggle: (string) => void;
  textFormatter: (string) => string;
}

type State = {
  open: boolean;
  activeCheckboxes: Array<string>;
}

class CheckboxDropdown extends React.PureComponent<Props, State> {
  static propsType = {
    checkboxList: PropTypes.array,
    title: PropTypes.string,
    activeCheckboxes: PropTypes.array,
    onToggle: PropTypes.func,
  }

  state: State2;

  constructor(props) {
    super(props);
    this.state = {
      open: false,
      activeCheckboxes: this.props.activeCheckboxes
    };
  }

  static getDerivedStateFromProps(props, state): any {
    if (props.activeCheckboxes.length !== state.activeCheckboxes.length) {
      return {
        activeCheckboxes: props.activeCheckboxes
      };
    }
    return null;
  }

  handleToggle(isOpen, event, metadata): void {
    if (isOpen || metadata.source !== 'select') {
      this.setState(() => ({ open: isOpen }));
    }
    if (event) {
      event.persist();
    }
  }

  render(): ReactNode {
    const { open, activeCheckboxes } = this.state;
    const { checkboxList, title, onToggle, textFormatter } = this.props;

    return (
      <Dropdown
        show={open}
        onToggle={this.handleToggle.bind(this)}
      >
        <Dropdown.Toggle id="dropdown-basic">
          {title}
        </Dropdown.Toggle>
        <Dropdown.Menu>
          {checkboxList.map((chkBox) => (
            <Dropdown.Item key={chkBox}>
              <input type="checkbox" onChange={() => onToggle(chkBox)} checked={activeCheckboxes.includes(chkBox)} />{chkBox}
            </Dropdown.Item>
          ))}
        </Dropdown.Menu>
      </Dropdown>
    );
  }
}

Использование:

     <CheckboxDropdown 
       checkboxList={FILTER_LIST}
       activeCheckboxes={activeFilter}
       title={"Dropdown"} />}
       onToggle={this.onToggleCheckbox.bind(this)}
     />

Установите флажок для обновления activeFilters. Как это можно исправить, когда activeFilters меняет обновление флажков?

Answer 1

Я не совсем уверен, как работает это решение. Я наблюдаю за изменением onChange на onClick на входе, и остановка распространения события обновляет флажок. https://codesandbox.io/s/frosty-bhabha-irhxc

< input
type = "checkbox"
onClick = {
  e => {
    onToggle(chkBox);
    e.stopPropagation();
  }
}
checked = {
  activeCheckboxes.includes(chkBox)
}
/>