Question

import React, { Component } from 'react'
import { Menu } from 'semantic-ui-react'

export default class MenuExampleVerticalPointing extends Component {
  state = { activeItem: 'home' }

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu pointing vertical>
        <Menu.Item name='home' active={activeItem === 'home'} onClick={this.handleItemClick} />
        <Menu.Item name='messages' active={activeItem === 'messages'} onClick={this.handleItemClick} />
        <Menu.Item name='friends' active={activeItem === 'friends'} onClick={this.handleItemClick} />
      </Menu>
    )
  }
}

这是Semantic UI代码的一部分。 https://react.semantic-ui.com/collections/menu#types-vertical-pointing

属性名称如何传递给处理程序？为什么有一个对象，即使没有对象传递给处理程序？

Answer 1

如何将属性名称传递给处理程序？

解构是提取多个值的便捷方式来自存储在（可能是嵌套的）对象和数组中的数据。有可能用于接收数据的位置（例如。的左侧）分配）。

此处name这是您的活动e的属性。当您点击Menu.Item时，您会将事件传递给包含name和active属性（或属性）的方法。

为什么有一个对象，即使没有对象传递给处理程序？

此处，e是合成事件。 React定义了这些合成事件根据W3C规范，所以你不必担心跨浏览器兼容性。单击Menu.Item然后向指定节点触发事件处理程序。单击指定的元素时，总会发生Onclick事件。

链接：

Answer 2

onClick事件将从Menu.Item触发。如果您检查Menu.Item代码，则可以看到onClick调用的函数this.props.onClick(event, {name : this.props.name})

如何将对象传递给React JS中的处理程序？

2 个答案: