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

  }

}

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>
    );
  }
}
皮特·祖雷克(Piotr Zurek)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React CSS Webpack Hashing & Usage with semantic-ui-sass, semantic-ui-react

来自分类Dev

修复了 react-semantic-ui 中的侧边栏

来自分类Dev

Semantic-ui-react:搜索结果不可见

来自分类Dev

React和Material Ui入门

来自分类Dev

React 漂亮的 dnd 不能与 React Semantic UI Table 一起使用

来自分类Dev

React Material UI插入和删除行

来自分类Dev

对齐AppBar项-材质UI和React

来自分类Dev

React-Bootstrap和深色UI

来自分类Dev

如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

来自分类Dev

react Semantic-UI - 多选复选框下拉菜单

来自分类Dev

为什么在使用“semantic-ui-react”的“Grid”组件时会出现不正确的布局?

来自分类Dev

如何在 React Semantic UI 中的 Progressbar 上设置自定义文本

来自分类Dev

Semantic-UI-React 网格列填充不设置内联列

来自分类Dev

如何在 Semantic-UI-React 下拉菜单中选择图像?

来自分类Dev

如何使用 react-semantic-ui 将选定的值设置为状态

来自分类Dev

我该如何处理事件以在React JS中打开窗口?

来自分类Dev

使用箭头函数在React中处理事件作为变量还是函数?

来自分类Dev

在 React .jst 中处理事件时执行 (bind(this)) 的目的是什么?

来自分类Dev

Firebase事件发生时更新React Native(Expo)UI

来自分类Dev

require('jquery')vs require('semantic-ui-css'),只有一个可以在Webpack的React编程中起作用

来自分类Dev

Semantic-ui-react:如何在没有点击/悬停的情况下触发弹出窗口?

来自分类Dev

如何在 React -Semantic UI - Dropdown 组件中生成带有数字数组的下拉列表?

来自分类Dev

(React.js) 初始状态随机生成。每次处理事件时如何防止它重新生成?

来自分类Dev

未知道具-React和Material-UI

来自分类Dev

使用React和Material-UI进行表单验证

来自分类Dev

无法编辑输入(material-ui和react-draggable)

来自分类Dev

React material-ui KeyboardDatePicker和Formik无法正常工作

来自分类Dev

如何在Flask后端使用React和material-ui?

来自分类Dev

react-hook-form和material-ui FormControl

Related 相关文章

  1. 1

    React CSS Webpack Hashing & Usage with semantic-ui-sass, semantic-ui-react

  2. 2

    修复了 react-semantic-ui 中的侧边栏

  3. 3

    Semantic-ui-react:搜索结果不可见

  4. 4

    React和Material Ui入门

  5. 5

    React 漂亮的 dnd 不能与 React Semantic UI Table 一起使用

  6. 6

    React Material UI插入和删除行

  7. 7

    对齐AppBar项-材质UI和React

  8. 8

    React-Bootstrap和深色UI

  9. 9

    如何在Semantic-react-ui的Modal屏幕上显示弹出窗口?

  10. 10

    react Semantic-UI - 多选复选框下拉菜单

  11. 11

    为什么在使用“semantic-ui-react”的“Grid”组件时会出现不正确的布局?

  12. 12

    如何在 React Semantic UI 中的 Progressbar 上设置自定义文本

  13. 13

    Semantic-UI-React 网格列填充不设置内联列

  14. 14

    如何在 Semantic-UI-React 下拉菜单中选择图像?

  15. 15

    如何使用 react-semantic-ui 将选定的值设置为状态

  16. 16

    我该如何处理事件以在React JS中打开窗口?

  17. 17

    使用箭头函数在React中处理事件作为变量还是函数?

  18. 18

    在 React .jst 中处理事件时执行 (bind(this)) 的目的是什么?

  19. 19

    Firebase事件发生时更新React Native(Expo)UI

  20. 20

    require('jquery')vs require('semantic-ui-css'),只有一个可以在Webpack的React编程中起作用

  21. 21

    Semantic-ui-react:如何在没有点击/悬停的情况下触发弹出窗口?

  22. 22

    如何在 React -Semantic UI - Dropdown 组件中生成带有数字数组的下拉列表?

  23. 23

    (React.js) 初始状态随机生成。每次处理事件时如何防止它重新生成?

  24. 24

    未知道具-React和Material-UI

  25. 25

    使用React和Material-UI进行表单验证

  26. 26

    无法编辑输入(material-ui和react-draggable)

  27. 27

    React material-ui KeyboardDatePicker和Formik无法正常工作

  28. 28

    如何在Flask后端使用React和material-ui?

  29. 29

    react-hook-form和material-ui FormControl

热门标签

归档