React Native函数组件中子组件TouchableOpacity如何更新父组件Hooks状态

问题根因 #

你遇到的核心错误如下：

• 子组件的onPress回调中只引用了props.callback，没有实际执行该函数，所以点击无响应
• 如果传递回调时写了callback={app()}（加了括号），会在组件渲染时直接执行函数，触发状态更新后又触发重渲染，形成无限循环
• 回调逻辑缺少参数传递，无法把当前按钮对应的数值传回父组件

修改代码 #

1. 子组件（CalculatorButton.js） #

export default function CalculatorButton(props) {
  return (
    <View style={styles.container}>
      {/* 执行回调并把当前按钮的num作为参数传入 */}
      <TouchableOpacity 
        style={[styles.buttonContainer, { backgroundColor: props.color}]} 
        onPress={() => props.callback(props.num)}
      >
        <Text style={styles.buttonText}>{props.children}</Text>
      </TouchableOpacity>
    </View>
  );
}

2. 父组件 #

首先在父组件内定义按钮点击处理函数，再把函数引用传递给子组件即可：

// 父组件内先定义状态和处理函数
const [value, setValue] = useState("0");

const handleButtonPress = (newNum) => {
  var finalNum = value
  if (value == "0") {
    finalNum = newNum;
  } else {
    finalNum = value + newNum
  }
  setValue(finalNum)
}

// 渲染部分引用子组件时传递函数引用，不要加括号
return (
  <View style={styles.container}>
    <Card style={{padding: 10, margin: 10, height: 50}}>
      <View style={styles.outputView}>
        <Text style={styles.outputText}>{value}</Text>
      </View>
    </Card>
    <View style={styles.buttonCol}>
      <View style={styles.buttonRow}>
        {/* 传递处理函数的引用，不要加() */}
        <CalculatorButton color={morningBlue} num={"7"} callback={handleButtonPress}>7</CalculatorButton>
      </View>
    </View>
    <Text style={styles.paragraph}>
    </Text>
  </View>
);

注意事项 #

• 后续添加其他数字/符号按钮时，只需要修改对应num属性的值即可复用同一套回调逻辑
• 如果需要实现清除、计算等特殊功能，可以新增type字段传给子组件，回调时带回类型做区分处理

内容的提问来源于stack exchange，提问作者NatMargo