很多好答案，但都遗漏了一些例子，考虑到react/ react native中的钩子

正如上面的回答中所写的，回调不应该在子组件内部被“调用”，而只能被引用。

这意味着什么? 让我们考虑一个父组件，它有2个改变rgb颜色的子组件:

import React, { useState } from "react"
import {View, Text, StyleSheet } from "react-native"
import ColorCounter from "../components/ColorCounter"

const SquareScreen = () =>{
  const [red, setRed] = useState(0)
  const [blue, setBlue] = useState(0)
  const [green, setGreen] = useState(0)

 return (
   <View>
     <ColorCounter 
       onIncrease={() => setRed(red + 15)}
       onDecrease={() => setRed(red - 15)}
       color="Red"
     />
     <ColorCounter 
       onIncrease={() => setBlue(blue + 15)}
       onDecrease={() => setBlue(blue - 15)} 
       color="Blue" 
     />
     <ColorCounter 
       onIncrease={() => setGreen(green + 15)}
       onDecrease={() => setGreen(green - 15)}
       color="Green" 
     />
    <View 
      style={{ 
        height:150,
        width:150, 
        backgroundColor:`rgb(${red},${blue},${green})`
      }}
    />
    </View>
 )   
}

const styles = StyleSheet.create({})

export default SquareScreen

这是子按钮组件:

import React, { useState } from "react"
import {View, Text, StyleSheet, Button } from "react-native"

const ColorCounter = ({color, onIncrease, onDecrease}) =>{
  return (
    <View>
      <Text>{color}</Text>
      <Button onPress={onIncrease}  title={`Increase ${color}`} /> --> here if you use onPress={onIncrease()} this would cause a call of setColor(either setRed,SetBlue or setGreen) that call again onIncrease and so on in a loop)
      <Button onPress={onDecrease}  title={`Decrease ${color}`} />
    </View>  
  )  
}

export default ColorCounter

先忘掉react: 这与react无关，让我们了解Java Script的基本概念。例如，您已经在java脚本中编写了以下函数(名称为A)。

function a() {

};

问题1)如何调用我们已经定义的函数? 答:一个();

问题2)如何传递函数的引用，以便稍后调用它? 答:让乐趣= a;

现在回到你的问题，你已经使用了函数名的paranthesis，这意味着当下面的语句将被渲染时，函数将被调用。

< td > < span onClick = {this.toggle()} >细节< / span > < / td >

那么如何改正呢? 简单! !只要去掉括号。通过这种方式，您已经将该函数的引用提供给onClick事件。它只在单击组件时才会回调函数。

<td><span onClick={this.toggle}>Details</span></td>

一个与反应相关的建议: 避免使用有人在回答中建议的内联函数，这可能会导致性能问题。 避免下面的代码，它将在函数被调用时一次又一次地创建同一个函数的实例(lamda语句每次都会创建新实例)。 注意:并且不需要显式地将事件(e)传递给函数。你可以在函数中访问它而不传递它。

{< td > < span onClick = {(e) = > this.toggle (e)} >细节< / span > < / td >}

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

这是因为你在渲染方法中调用toggle，这将导致重新渲染，toggle将再次调用，再次重新渲染，等等。

代码中的这一行:

{<td><span onClick={this.toggle()}>Details</span></td>}

你需要使onClick指向这个。切换而不是调用它。

要解决这个问题，请这样做:

{<td><span onClick={this.toggle}>Details</span></td>}

onClick你应该调用函数，这叫做你的函数切换。

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

我知道这个问题有很多答案，但因为他们大多数都是老的(好吧，更老了)，没有人提到我非常喜欢的方法。简而言之:

使用功能组件和钩子。

长:

尝试使用尽可能多的函数组件，而不是类组件，特别是用于渲染，并尽量保持它们尽可能纯粹(是的，数据在默认情况下是脏的)。

功能组件有两个明显的好处(还有更多):

纯粹性或接近纯粹性使调试变得更加容易 功能组件不需要构造函数锅炉代码

快速证明第二点-这不是绝对恶心吗?

constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  

如果你使用功能组件进行更多的渲染，你将需要伟大的duo - hook的第二部分。为什么它们比生命周期方法更好，它们还能做什么，以及更多的东西，这将占用我很多空间，所以我建议你听他自己说:Dan对钩子的说教

在这种情况下，你只需要两个钩子:

一个名为useCallback的回调钩子。这样可以防止在重新渲染时反复绑定函数。

一个名为useState的状态钩子，用于在整个组件都是函数并整体执行的情况下保持状态(是的，由于钩子的魔力，这是可能的)。在该钩子中，您将存储toggle的值。

如果你读到这一部分，你可能想看看我所说的一切是如何应用于原始问题的。给你: 演示

对于那些只想看一眼组件和WTF是关于什么的人，这里是:

const Item = () => {

    // HOOKZ
  const [isVisible, setIsVisible] = React.useState('hidden');

  const toggle = React.useCallback(() => {
    setIsVisible(isVisible === 'visible' ? 'hidden': 'visible');
  }, [isVisible, setIsVisible]);

    // RENDER
  return (
  <React.Fragment>
    <div style={{visibility: isVisible}}>
        PLACEHOLDER MORE INFO
    </div>
    <button onClick={toggle}>Details</button>
  </React.Fragment>
  )
};

PS:我写这个是为了防止很多人有类似的问题。希望他们会喜欢我在这里展示的东西，至少好到可以再谷歌一点。这不是我说其他答案是错误的，这是我说，自从它们被写出来以来，有另一种方法(恕我直言，更好的方法)来处理这个问题。

你应该在调用函数时传递事件对象:

{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

如果你不需要处理onClick事件，你也可以输入:

{<td><span onClick={(e) => this.toggle()}>Details</span></td>}

现在还可以在函数中添加参数。