React Bootstrap Dropdown 项目不会在状态更改时更新

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