React and Semantic-ui-react，代理事件

Question

我是 React 的新手，我正在使用 Semantic-ui-react。我正在尝试使用下拉菜单。

当我想从下拉列表中获取我的值并调用我的函数时。我的活动获得一些代理对象。

  handleTagChange(e) {
    console.log("handleTagChange");
    console.log(e);
  }

但是如果我在函数中添加类似 test 的其他东西，e.target.value 会起作用并且 test 是代理对象。这是为什么？

  handleTagChange(test, e) {
    console.log("handleTagChange");
    console.log(test);
    console.log(e);
  }

TagFilter.js

import React, { PropTypes } from 'react';
import { Dropdown } from 'semantic-ui-react'

export default class TagFilter extends React.PureComponent {
  render() {
  console.log(this.props);
    const options = [
      { "text": "Admin stuff", "value": "admin stuff" },
      { "text": "Frontend", "value": "frontend" },
      { "text": "JS", "value": "js" },
      { "text": "Mucking about", "value": "mucking about" },
      { "text": "React", "value": "react" }
    ];

    return (
      <Dropdown placeholder='Skills' fluid selection options={options} onChange={this.props.handleTagChange} />
    );

  }

}

Employee.js

import React, { PropTypes } from 'react';
import { Image, List } from 'semantic-ui-react';

import TagFilter from './TagFilter';
import ProductFilter from './ProductFilter';
import MyModal from './Modal';

export default class Employees extends React.Component {
  //static defaultProps = {
  //}

  constructor() {
    super();
    this.closeModal = this.closeModal.bind(this);
    this.handleTagChange = this.handleTagChange.bind(this);
    this.handleProductChange = this.handleProductChange.bind(this);
  }

  state = {
    tagsFilterValue: null,
    productsFilterValue: null,
    employeeDetails: null,
    openModal: false
  }

  handleTagChange(e) {
    console.log("handleTagChange");
    console.log(e);
  }

  handleProductChange(e) {
    let productValue = e.target.value;
    this.setState({productsFilterValue: productValue});
  }

  handleEmployeeClick(name, e) {
    this.setState({employeeDetails: name});
    this.setState({openModal: true});
  }

  closeModal() {
    this.setState({openModal: false});
  }

  render() {
    let filteredEmployees = this.props.data.filter(
      (employee) => {
        // If state tagsFilterValue and productsFilterValue is not null
        if (this.state.tagsFilterValue && this.state.productsFilterValue) {
          return employee.tags.indexOf(this.state.tagsFilterValue) !== -1 && employee.products.indexOf(this.state.productsFilterValue) !== -1;
        }
        // If state tagsFilterValue is not null
        else if (this.state.tagsFilterValue) {
          return employee.tags.indexOf(this.state.tagsFilterValue) !== -1;
        }
        // If state productsFilterValue is not null
        else if (this.state.productsFilterValue) {
          return employee.products.indexOf(this.state.productsFilterValue) !== -1;
        }
        else {
          return employee;
        }
      }
    );


    let employeeDetails = this.props.data.filter(
      (employee) => {
          return employee.name.indexOf(this.state.employeeDetails) !== -1;
      }
    );


    return (
      <div>
        { employeeDetails.map((employee) => (
          <MyModal employeeDetails={employee} closeModal={this.closeModal} openModal={this.state.openModal} />
        ))}

        <div className="ui grid">
          <TagFilter handleTagChange={this.handleTagChange} tagsFilterValue={this.state.tagsFilterValue} />
          <ProductFilter handleProductChange={this.handleProductChange} productsFilterValue={this.state.productsFilterValue} />
        </div>

        <List>
        { filteredEmployees.map((employee) => (
          <List.Item key={employee.name}>
          <div className="ui card">
            <div className="image">
              <img alt="User avatar" src={employee.image}/>
            </div>
            <div className="content">
              <a className="header" onClick={this.handleEmployeeClick.bind(this, employee.name)}>{employee.name}</a>
              <div className="meta">{employee.title}</div>
            </div>
          </div>
          </List.Item>
        ))}
        </List>

      </div>
    );
  }
}

Answer 1

发生这种情况是因为大多数 semantic-ui-react 事件 return 2 个对象，第二个对象包含处理事件所需的数据。在此处的 GitHub 问题中有更详细的解释：
https://github.com/Semantic-Org/Semantic-UI-React/issues/638#issuecomment-252035750

React and Semantic-ui-react，代理事件

React and Semantic-ui-react, proxy event

reactjs

semantic-ui-react