布尔玛反应奇怪的行为答案

【问题标题】：Bulma react weird behavior布尔玛反应奇怪的行为
【发布时间】：2018-09-12 08:20:56
【问题描述】：

我正在尝试遵循以下示例： 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

【问题讨论】：

oki，hoverable 显然并不意味着项目在悬停时会改变颜色，而是下拉发生在悬停时。所以至少这解释了这一点。仍然无法获得图标，也无法将鼠标悬停在项目行为上......

标签： reactjs bulma

【解决方案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" />);

请和这个一起比较！

【讨论】：

【解决方案2】：

您没有为 Dropdown bulma-react 组件设置状态活动。在他们的 github repo 中有这个状态为 active 的函数

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

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

【讨论】：

我会说我愿意：github.com/jonalv/bulma-react-example/blob/master/src/… 和 github.com/jonalv/bulma-react-example/blob/…