React Native子组件向父组件传值仅初始化触发，需改为点击按钮触发

这个问题我之前也碰到过，核心原因很简单：你在TouchableHighlight的onPress属性里直接执行了函数，而不是传递一个函数引用，导致组件一渲染就触发了方法，而不是等用户点击才执行。

问题分析 #

看你子组件的这段代码：

<TouchableHighlight 
  underlayColor="#ffffff" 
  onPress={this.handleAddItemQuantity(this.props.data._id)} 
  style={styles.icon} >

这里的this.handleAddItemQuantity(this.props.data._id)是立即调用函数，组件渲染时就会执行它，自然初始化阶段就把id传给父组件了。而onPress需要的是一个“点击时才会执行的函数”，也就是函数引用，不是函数执行结果。

解决方案 #

给你三种可行的修改方式，选哪种都可以：

1. 用箭头函数包裹（最直观）

把onPress的值改成箭头函数，这样只有点击时才会执行内部的方法调用：

<TouchableHighlight 
  underlayColor="#ffffff" 
  onPress={() => this.handleAddItemQuantity(this.props.data._id)} 
  style={styles.icon} >
  <Image style={styles.icon} resizeMode="contain" source={require('./images/icon-add.png')} />
</TouchableHighlight>

2. 提前绑定参数（适合需要复用方法的场景）

在子组件的构造函数里绑定参数，或者直接在onPress里用bind：

// 方式一：构造函数里绑定
constructor(props) {
  super(props);
  this.handleAddItem = this.handleAddItemQuantity.bind(this, props.data._id);
}

// 然后render里用
<TouchableHighlight 
  underlayColor="#ffffff" 
  onPress={this.handleAddItem} 
  style={styles.icon} >

或者直接在render里bind：

<TouchableHighlight 
  underlayColor="#ffffff" 
  onPress={this.handleAddItemQuantity.bind(this, this.props.data._id)} 
  style={styles.icon} >

注意：bind每次都会创建新函数，如果列表项很多，可能有轻微性能影响，不过大多数场景下可以忽略。

3. 修改子组件方法，直接从props取id（最简洁）

既然id已经在子组件的props里，完全可以不用传递参数，直接在handleAddItemQuantity里获取：

// 子组件的方法修改成无参数
handleAddItemQuantity = () => {
  console.log('child component method');
  this.props.addItemQuantityPress(this.props.data._id);
}

// 然后render里直接传方法引用
<TouchableHighlight 
  underlayColor="#ffffff" 
  onPress={this.handleAddItemQuantity} 
  style={styles.icon} >

这种方式最干净，也避免了传递参数的麻烦。

修改后的效果 #

不管用哪种方式，都能确保只有用户点击按钮时，才会触发handleAddItemQuantity，进而调用父组件的addItemQuantity方法，不会再在初始化阶段输出那些日志了。

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