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

Answer 2

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

Jenkins_Home

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

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

使用onClick在单个选项上反应Semanti UI DropDown

2 个答案: