React와 Semantic-ui-react, 프록시 이벤트

Question

저는 React에서 새로 왔으며 Semantic-ui-react를 사용하고 있습니다. Dropdown을 사용하려고합니다.

드롭 다운에서 내 가치를 얻고 내 기능을 호출하고 싶습니다. 내 이벤트가 프록시 객체를 얻는다.

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

그러나 함수에 test와 같은 다른 항목을 추가하면 e.target.value가 작동하고 테스트가 프록시 개체입니다. 왜 그런가요?

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 이벤트가 2 개체를 반환하고, 두 번째는 당신이 필요로하는 데이터를 포함 무엇 때문에 이런 일이 이벤트를 처리합니다. 여기 GitHub 문제에 대한 자세한 설명이 있습니다.
https://github.com/Semantic-Org/Semantic-UI-React/issues/638#issuecomment-252035750