React и Semantic-ui-react, прокси-событие

Я новичок в 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} />
    );

  }

}

Сотрудник.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>
    );
  }
}

person ComCool    schedule 22.12.2016    source источник
comment
Удар .... .... ...   -  person ComCool    schedule 24.12.2016


Ответы (1)


Это происходит потому, что большинство событий semantic-ui-react возвращают 2 объекта, а второй содержит данные, необходимые для обработки события. Более подробное объяснение проблемы GitHub можно найти здесь:
https://github.com/Semantic-Org/Semantic-UI-React/issues/638#issuecomment-252035750

person Piotr Zurek    schedule 08.01.2017