Question

我有一个屏幕，显示列表中的一些项目。我的项目是一个名为CardItem的组件，它有几个按钮。我实现了如上所述，但是当我运行我的项目时，组件将我想要的数据传递给init状态的父方法，但是当用户点击该按钮时我需要它。

家长：

addItemQuantity = (id) => {
  console.log('ADD item quantity with id: ', id);
};

render() {  
   return (
      <CardItem
         data={item}
         index={idx}
         key={item._id}
         addItemQuantityPress={this.addItemQuantity}
      />
   )

}

孩子：

handleAddItemQuantity = (id) => {
  console.log('child component method');
  this.props.addItemQuantityPress(id);
}

render() {
    return (
        <View style={styles.cardItemOperation} >
            <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>
       </View>
    )
}

运行项目时的输出：

子组件方法
  添加物品数量，ID：5a2660924713cf6c8d088424
  子组件方法
  添加项目数量，ID为：5a1a58cacd0b8a0febce9fd7
  子组件方法
  添加物品数量，ID：5a1a5856cd0b8a0febce9fd5
  子组件方法
  添加物品数量，ID：5a4c8e9d2ebcf507323e7b73
  子组件方法
  添加物品数量，ID：5a1a5862cd0b8a0febce9fd6

Answer 1

正如你在那里写的那样，

this.handleAddItemQuantity(this.props.data._id)

渲染时会立即执行。将其更改为：

onPress={() => {this.handleAddItemQuantity(this.props.data._id)}}

应该做的伎俩

从子节点到父节点的React-native传递数据只能在init中运行

1 个答案: