使用单个选项上的 onClick 事件反应语义 UI 下拉菜单答案

【问题标题】：React Semanti UI DropDown with onClick Even on individual Options使用单个选项上的 onClick 事件反应语义 UI 下拉菜单
【发布时间】：2018-11-13 18:31:34
【问题描述】：

React Semantic UI 具有带有 OnClick 属性的 DropDown 是否可以使用不同的 onClick 事件进行每个选择。几乎每个选择都可以运行单独的功能。所以在下面的例子中，如果选择了 angular，我需要运行一个不同于 css 的函数，或者设计

const options = [
  { key: 'angular', text: 'Angular', value: 'angular' },
  { key: 'css', text: 'CSS', value: 'css' },
  { key: 'design', text: 'Graphic Design', value: 'design' },
  { key: 'ember', text: 'Ember', value: 'ember' },
  { key: 'html', text: 'HTML', value: 'html' },
  { key: 'ia', text: 'Information Architecture', value: 'ia' },
  { key: 'javascript', text: 'Javascript', value: 'javascript' },
  { key: 'mech', text: 'Mechanical Engineering', value: 'mech' },
]

const DropdownExampleMultipleSelection = () => (
  <Dropdown placeholder='Skills' fluid multiple selection options={options} />
)

我尝试过 onchange，但它给了我未定义的值

  handleChange = (e) => {
        this.setState({value: e.target.value});
        console.log('Dropdown changed ' + e.target.value);
        return;
    }
<Dropdown onChange={(e) => {this.handleChange(e)}} />

【问题讨论】：

也许在handleChange里面你可以用event.target.value编写switch case来单独实现。
@SaurabhNemade 未定义
handleChange(e, data) 将为您提供数据中的值。 e._targetInst.return.key 也应该给你价值。让我快点做个小提琴吧。

标签： javascript reactjs user-interface

【解决方案1】：

带有解决方案的代码沙盒：https://codesandbox.io/s/vvz2yow5k5

    class DropdownExampleMultipleSelection extends Component {
      handleChange = (e, { value }) => {
        // array of selected values
        console.log(value);
      };

      render() {
        return (
          <Dropdown
            placeholder="Skills"
            fluid
            multiple
            selection
            options={options}
            onChange={this.handleChange}
          />
        );
      }
    }

【讨论】：

谢谢您，第二个参数与 e.target.value 有何不同？
为什么 onclick 的行为不同？

【解决方案2】：

您可以通过以下方式访问这些值：

  handleClick = (e, data) => {
    console.log(data.value)
    console.log(e._targetInst.return.key)
  }

data.value 将为您提供所有选定的值，而 e._targetInst.return.key 将为您提供当前更改元素的键。

工作小提琴： https://stackblitz.com/edit/react-5b24ux?file=index.js 您可以通过打开 chrome devtools 查看每个选择的值。

【讨论】：

非常感谢'