React-Bootstrap-Multiselect正在渲染一个非功能元素

Question

我正在使用React 15.5，项目中包含Bootstrap 4。

我正在尝试实现以下内容：https://projects.skratchdot.com/react-bootstrap-multiselect/

我的代码：

<Dropdown
    onChange={event => {
        this.setState({
            yearFilter: this.value(this.refs.yieldYears)
        });
    }}
    ref="yieldYears"
    data={[
        { value: 'average', selected: true },
        { value: 2017, label: '2017' },
        { value: 2018, label: '2018' }
    ]}
    multiple
/>

我的元素如下所示：

下拉列表不起作用 - 单击该元素不起任何作用。

当我检查元素时，HTML看起来很好。

这是某种Bootstrap版本冲突吗？

Answer 1

我认为你缺少两个重要的道具： toggle和isOpen。

docs的示例：

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      dropdownOpen: false
    };
  }

  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }

  render() {
    return (
      <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
        <DropdownToggle caret>
          Dropdown
        </DropdownToggle>
        <DropdownMenu>
          <DropdownItem header>Header</DropdownItem>
          <DropdownItem disabled>Action</DropdownItem>
          <DropdownItem>Another Action</DropdownItem>
          <DropdownItem divider />
          <DropdownItem>Another Action</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    );
  }
}

请注意，您使用的是旧ref API 这是当前的ref API：

ref={ref => this.myRef = ref}

最重要的是，我没有在ref文档中看到任何react-bootstrap支柱，只有inputRef但是输入组件