React-native 将数据从 child 传递到 parent 仅在 init 中有效
React-native pass data from child to parent just works in init
我有一个屏幕显示列表中的一些项目。我的项目是一个名为 CardItem 的组件,它有几个按钮。我像上面那样实现但是当我 运行 我的项目时,组件将我想要的数据(即 id)传递给处于初始状态的 parent 方法,但是当用户单击该按钮时我需要它。
Parent:
addItemQuantity = (id) => {
console.log('ADD item quantity with id: ', id);
};
render() {
return (
<CardItem
data={item}
index={idx}
key={item._id}
addItemQuantityPress={this.addItemQuantity}
/>
)
}
child:
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>
)
}
当我运行项目时输出:
child component method
ADD item quantity with id: 5a2660924713cf6c8d088424
child component method
ADD item quantity with id: 5a1a58cacd0b8a0febce9fd7
child component method
ADD item quantity with id: 5a1a5856cd0b8a0febce9fd5
child component method
ADD item quantity with id: 5a4c8e9d2ebcf507323e7b73
child component method
ADD item quantity with id: 5a1a5862cd0b8a0febce9fd6
如您所写,
this.handleAddItemQuantity(this.props.data._id)
将在渲染时立即执行。将其更改为:
onPress={() => {this.handleAddItemQuantity(this.props.data._id)}}
这应该可以解决问题
我有一个屏幕显示列表中的一些项目。我的项目是一个名为 CardItem 的组件,它有几个按钮。我像上面那样实现但是当我 运行 我的项目时,组件将我想要的数据(即 id)传递给处于初始状态的 parent 方法,但是当用户单击该按钮时我需要它。
Parent:
addItemQuantity = (id) => {
console.log('ADD item quantity with id: ', id);
};
render() {
return (
<CardItem
data={item}
index={idx}
key={item._id}
addItemQuantityPress={this.addItemQuantity}
/>
)
}
child:
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>
)
}
当我运行项目时输出:
child component method
ADD item quantity with id: 5a2660924713cf6c8d088424
child component method
ADD item quantity with id: 5a1a58cacd0b8a0febce9fd7
child component method
ADD item quantity with id: 5a1a5856cd0b8a0febce9fd5
child component method
ADD item quantity with id: 5a4c8e9d2ebcf507323e7b73
child component method
ADD item quantity with id: 5a1a5862cd0b8a0febce9fd6
如您所写,
this.handleAddItemQuantity(this.props.data._id)
将在渲染时立即执行。将其更改为:
onPress={() => {this.handleAddItemQuantity(this.props.data._id)}}
这应该可以解决问题