onClick不适用于我的React组件

Question

我有复合组件。单击时，父组件应该能够将道具传递给子组件。

当我将onClick处理程序添加到标题的搜索组件时，没有消息打印到控制台。

父组件头

import React from "react"
import styled from "styled-components"
import Search from "./search"

const Container = styled.header``
const Wrapper = styled.div``

function Header () {
  function toggleSearch(e) {
    e.preventDefault();
    console.log('Search')
  }

  return ( 
    <Container>
      <Wrapper>
        <Search onClick={toggleSearch} />
      </Wrapper>
    </Container>
  )
}

export default Header

和子组件搜索

import React from 'react'
import styled from 'styled-components'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSearch } from '@fortawesome/free-solid-svg-icons'

const Container = styled.span``
const Icon = styled(FontAwesomeIcon)

const Search = () => {
  return (
    <Container>
      <Icon icon={faSearch} />
    </Container>
  )
}

export default Search

• 当我向标题添加按钮时，将触发click事件。
• 当我将“搜索”容器更改为按钮而不是跨度时，可以单击该按钮，但消息不会写入控制台。

如何触发点击事件？

---

我正在使用

"react": "^16.9.0"
"styled-components": "^4.3.2

Answer 1

由于Search是组件，因此onClick事件处理程序必须传递到其中的元素上。 onClick与组件上的任何其他道具一样，没有默认含义。

const Search = ({onClick}) => {
  return (
    <Container onClick={onClick}>
      <Icon icon={faSearch} />
    </Container>
  )
}

Answer 2

您应该在搜索组件中添加该onClick道具。您没有在使用这些道具。如果要单击，请在图标元素上说，那么您应该执行以下操作。

const Search = (props) => {
  return (
    <Container>
      <Icon icon={faSearch} onClick={props.onClick} />
    </Container>
  )
}

如果您希望它添加到Container元素上，那么您应该这样做。

const Search = (props) => {
  return (
    <Container onClick={props.onClick}>
      <Icon icon={faSearch} />
    </Container>
  )
}

Answer 3

这是因为自定义Search组件未实现onClick回调道具。用以下扩展Search应该可以解决问题：

/* Add props argument */
const Search = (props) => {
  return (
    {/* Add onClick prop to span, and pass through supplied onClick prop */}
    <Container onClick={props.onClick}>
      <Icon icon={faSearch} />
    </Container>
  )
}