时间戳

首页 > 解决方案 > 如何在反应中将组件传递给onClick

javascript - 如何在反应中将组件传递给onClick

问题描述

import React from 'react'

export default () => {
  function clickHandler() {
    console.log('Button clicked')
  }
  return (
    <div>
      <button onClick={clickHandler}>Click</button>
    </div>
  )
}

在上面的代码中，我们看到一个函数已传递给 onClick。以同样的方式传递给 onClick 我需要传递一个存在于同一个 src 中的不同组件。这个组件由一个 .js 和一个 .css 文件组成。你能帮我解决一下吗？提前致谢

标签： javascriptcssreactjsreact-nativejsx

解决方案

如果您不介意使用类而不是函数，那么您的其他组件应如下所示：

import React from 'react'

class ShowThisAfterClick extends React.Component {
  return (
    <div>
      <p>This is what you want to show</p>
    </div>
  )
}
export default ShowThisAfterClick

现在您应该更新您显示的组件：

import React from 'react'
import ShowThisAfterClick from './where/you/put/the/ShowThisAfterClick.js'

class Main extends React.Component {
  constructor(props){
    super(props)
    this.state = { isButtonClicked: false }

    this.clickHandler = this.clickhandler.bind(this)
  }
  
  clickHandler() {
    this.setState({ isButtonClicked: true })
  }
  
  render() {
    const { isButtonClicked } = this.state
    return (
      <div>
        <button onClick={ this.clickHandler }>Click</button>
        { isButtonClicked ? <ShowThisAfterClick /> : ''}
      </div>
    )
  }
}
export default Main

如果您想继续使用功能，那么我建议您阅读手册，它写得非常好。

推荐阅读