如何在我的图片中渲染我的函数？

Question

当你点击我的图片时，我想渲染文本，但我的功能似乎不起作用。我正在做react js

我的html：

<Row>
      <Col md={2} s={6} xs={4}  className="blocClient"><img className='img1' src="/images/data.png" onClick={this.OnClick()} style={{cursor:'pointer'}} /></Col>
      </Row>

还有我的函数

OnClick = () =>{
  return(
    <Col>
    <h1>Dois-je déclarer ces pourboires et vais-je payer des impôts?</h1>
    <p>Oui, ce sont des revenus, donc il faut les déclarer et Tipourboire te met à disposition le document qui t’indique ou tu dois le noter dans ta déclaration de revenus.</p>
    </Col>)

}

我是不是忘了什么？在我的控制台上，当我单击时，他们也会说未捕获错误:期望onClick侦听器是一个函数，但却得到了object类型的值。

Answer 1

onClick属性实际上是用来调用函数和执行一些逻辑的，它不应该返回React语法，因为这是没有意义的。

所以我建议做的是管理一个"displayText“状态，它将是一个布尔值，然后根据这个状态显示文本。如下所示：

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

  OnClick = () => {
    this.setState({ displayText: !this.state.displayText })
  }

  render() {
    return (
      <div>
        <Row>
          <Col md={2} s={6} xs={4} className="blocClient">
            <img className='img1' src="/images/data.png" onClick={this.OnClick} style={{ cursor: 'pointer' }} />
          </Col>
        </Row>
        {this.state.displayText && (
          <Col>
            <h1>Dois-je déclarer ces pourboires et vais-je payer des impôts?</h1>
            <p>Oui, ce sont des revenus, donc il faut les déclarer et Tipourboire te met à disposition le document qui t’indique ou tu dois le noter dans ta déclaration de revenus.</p>
          </Col>
        )}
      </div>
    )
  }
}

export default Content 

另外，请注意，您应该删除img标记的onClick属性中的括号。应该是this.OnClick而不是this.OnClick()

Answer 2

您可以传递一个将调用您的函数的函数

onClick= {() => this.OnClick()}