javascript - 在单个选项上使用 onClick 事件响应语义 UI DropDown

Question

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

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