Question

我尝试在以下位置遵循示例： https://couds.github.io/react-bulma-components/?selectedKind=Dropdown&selectedStory=Default&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

单击后，下拉菜单会扩展，鼠标指针将变为下拉菜单项上的链接符号。物品也有悬停着色。当我自己尝试时，下拉列表会在悬停时扩展，鼠标指针不会在项目上显示链接符号，并且在悬停时没有颜色。我这样写：

    <Dropdown value={this.state.visualising} onChange={this.changeVisualising} {...this.props}>
              <Dropdown.Item value="foo">foo</Dropdown.Item>
              <Dropdown.Item value="bar">bar</Dropdown.Item>
              <Dropdown.Item value="buzz">buzz</Dropdown.Item>
    </Dropdown>

我是否会缺少一些它没有抱怨的依赖，而只是默默地失败了？为什么我会得到完全不同的行为？

哦，我也没有让箭头指向下方...

编辑：我做了一个小例子，可以在https://github.com/jonalv/bulma-react-example

上找到。

Answer 1

import React from 'react';

import { storiesOf } from '@storybook/react';

import Dropdown from '.';

class Wrapper extends React.Component {
  state = {
    selected: 'active',
  };
  onChange = selected => {
    this.setState({ selected });
  };
  render() {
    return (
      <Dropdown value={this.state.selected} onChange={this.onChange} color="info" {...this.props}>
        <Dropdown.Item value="item">Dropdown item</Dropdown.Item>
        <Dropdown.Item value="other">Other Dropdown item</Dropdown.Item>
        <Dropdown.Item value="active">Active Dropdown item</Dropdown.Item>
        <Dropdown.Item value="other 2">Other Dropdown item</Dropdown.Item>
        <Dropdown.Divider />
        <Dropdown.Item value="divider">With divider</Dropdown.Item>
      </Dropdown>
    );
  }
}

storiesOf('Dropdown', module)
  .add('Default', () => (
    <Dropdown>
      <Dropdown.Item value="item">Dropdown item</Dropdown.Item>
      <Dropdown.Item value="other">Other Dropdown item</Dropdown.Item>
      <Dropdown.Item value="active">Active Dropdown item</Dropdown.Item>
      <Dropdown.Item value="other 2">Other Dropdown item</Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item value="divider">With divider</Dropdown.Item>
    </Dropdown>
  ))
  .add('Hoverable', () => (
    <Dropdown hoverable>
      <Dropdown.Item value="item">Dropdown item</Dropdown.Item>
      <Dropdown.Item value="other">Other Dropdown item</Dropdown.Item>
      <Dropdown.Item value="active">Active Dropdown item</Dropdown.Item>
      <Dropdown.Item value="other 2">Other Dropdown item</Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item value="divider">With divider</Dropdown.Item>
    </Dropdown>
  ))
  .add('Controlled component', () => <Wrapper />)
  .add('Controlled component Hoverable', () => <Wrapper hoverable color="dark" />);

请与此进行比较！

Answer 2

您未将Dropdown布尔反应组件设置为活动状态。在他们的github存储库中，此功能处于活动状态

  state = {
    selected: 'active',
  }
  onChange = (selected) => {
    this.setState({ selected });
  }

顶部下拉列表中有onChange={this.onChange}

布尔玛做出怪异的举动

2 个答案: