传递了一个函数作为道具，但它没有在 React 的子组件中执行

Question

我正在使用语义反应 ui 来制作菜单。利用活动状态功能。在这种情况下，当您访问链接时，它会获得焦点或下划线。然而，在我的实现中，我将它作为道具传递给子组件。见下文...

class DesktopContainer extends Component {

 state = {}

 handleItemClick(event) {

  var { name } = event.target;

  this.setState({

   activeItem: name

  })

 }

 render() {

  const { GenericHeadingComponent, children, getWidth, isLoggedIn, logOutUser } = this.props

  const { fixed, activeItem } = this.state

  return (

   <Responsive getWidth={getWidth} minWidth={Responsive.onlyTablet.minWidth}>

        <GenericIsUserLoggedInLink

         isHomeButton={true}

         key="1"

         name='home'

         active={activeItem === 'home'}

         handleItemClick={this.handleItemClick} /* is this correct */

         mobile={false}

        />

        <GenericIsUserLoggedInLink

         isLoggedIn={isLoggedIn}

         route="/profile"

         anchorText="Profile"

         key="2"

         name='profile'

         active={activeItem === 'profile'}

         handleItemClick={this.handleItemClick} /* is this correct */

         mobile={false}

        />

        <GenericIsUserLoggedInLink

         isLoggedIn={isLoggedIn}

         route="/dashboard"

         anchorText="Dashboard"

         key="3"

         name='dashboard'

         active={activeItem === 'dashboard'}

         handleItemClick={this.handleItemClick}  /* is this correct */

         mobile={false}

        />

        <Menu.Item position='right'>

         <Button inverted={!fixed}>

          <GenericIsUserLoggedInLink

           route="/login"

           isLoggedIn={isLoggedIn}

           logOutUser={logOutUser}

           key="4" />

         </Button>

         <Button inverted={!fixed} primary={fixed} style={{ marginLeft: '0.5em' }}>

          <Link href="/register">

           <a>Register</a>

          </Link>

         </Button>

        </Menu.Item>

       </Container>

      </Menu>

      <GenericHeadingComponent />

     </Segment>

    </Visibility>

    {children}

   </Responsive>

  )

 }

}

我应该将状态移到 HOC 中吗？我没有收到错误，所以我很难过。

Answer 1

首先，您的 handleClick 在设置状态时会由于this. 所以我建议你要么在构造函数中绑定它，要么把它改成这样的箭头函数 -handleItemClick = (e) => {}现在，我已经在几个项目中使用了 Semantic-ui-react，并且点击事件的运行方式有点不同。根据文档 -Called on click. When passed, the component will render as an `a`tag by default instead of a `div`.onClick(event: SyntheticEvent, data: object)eventReact's original SyntheticEvent.dataAll props.所以改变你的 onClick 到onClick={handleItemClick}then&nbsp;handleItemClick = (e, { name }) => this.setState({ activeItem: name })我希望这可以帮助你。更新：您的最新错误是因为<a>链接中的标签。链接来自react-router就像一个标签，我们知道<a href="1">&nbsp; &nbsp; <a href="2"></a></a>是无效的 HTML。您可以参考此问题了解更多信息Link 不能作为链接的后代出现。要解决您的错误，只需删除标签内的标签即可。更新： -最新的错误是因为您在 handleItemClick 中传递名称if (isHomeButton) {&nbsp;return <Link href="/"><Menu.Item name={name} active={activeItem === name} onClick={handleItemClick}></Menu.Item></Link> //change the onClick here//}

Answer 2

你可以尝试在构造函数中绑定你的方法吗class DesktopContainer extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {};&nbsp; &nbsp; this.handleItemClick = this.handleItemClick.bind(this);&nbsp; }&nbsp; // remaining code}希望能帮助到你