如何从React Native可触摸事件currentTarget中读取道具

Question

我有下面的React Native代码，当用户点击图像时，它会运行press()方法。我想从事件对象中获取itemIndex道具。我在press方法中设置了一个断点，并在Watch中添加了一些表达式。根据手表，我确定事件的目标(事件起源)是正确的图像。itemIndex道具也可用。正在处理的元素是currentTarget，手表看到它是一个"RCTView"，我期待着一个TouchableOpacity，所以Touchable不透明下面可能是一个View？currentTarget itemIndex属性未定义，为什么？如何从currentTarget获得道具？

我想用这种方式来避免为每个渲染项创建添加方法。

FYI，ref={(c) => this._input = c}将不起作用，因为它正在循环中运行。onPress={(e) => this.press(e, i)}创建了一个我试图避免的新函数。

观看

1. 目标_currentElement.props.item索引：2
2. 目标_currentElement.type.displayName:"RCTImageView">
3. currentTarget_currentElement.props.itemIndex:未定义

4. currentTarget_currentElement.type.displayName:"RCTView">

   press: function(event){
   var currentTarget = ReactNativeComponentTree.getInstanceFromNode(event.currentTarget);
   var target = ReactNativeComponentTree.getInstanceFromNode(event.target);
   var currentTargetIndex = currentTarget._currentElement.props.itemIndex;
   var targetIndex = target._currentElement.props.itemIndex;
   var url = this.state.data.items[currentTargetIndex].url;
   Linking.openURL(url).catch(err => console.error('An error occurred', err));
   },
   render: function() {
   return (
   <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.galleryView}>
   {
   this.state.data.items.map((data, i) =>
   <TouchableOpacity itemIndex={i} key={i} activeOpacity={0.5} onPress={this.press} >
   <Image itemIndex={i} key={i} source={{uri:data.previewImageUri}} style={styles.galleryImage} />
   </TouchableOpacity>
   )
   }
   </ScrollView>
   );
   }
   

Answer 1

事实上，我最近遇到了同样的问题，我发现了两种不同的方法。更简单的方法是更改onPress，将索引传递给印刷功能，这是第二种方法：

press: function(event, index){
var url = this.state.data.items[index].url;
Linking.openURL(url).catch(err => console.error('An error occurred', err));
},
render: function() {
return (
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={styles.galleryView}
>
{
this.state.data.items.map((data, i) =>
<Images data={data} key={i} index={i} press={this.press} />
)
}
</ScrollView>
);
}
const Images = (props) => {
const imageClicked = (e) => {
props.press(e, props.index);
}
return (
<TouchableOpacity activeOpacity={0.5} onPress={imageClicked} >
<Image source={{uri:props.data.previewImageUri}} style={styles.galleryImage} />
</TouchableOpacity>
)
}

Answer 2

您可以使事件处理程序成为一个接受额外参数的curried函数。

//Curried function for onPress event handler
handleOnPress = (someId, someProp) => event => {
//USE someProp ABOVE TO ACCESS PASSED PROP, WHICH WOULD BE undefined IN THIS CASE
//Use event parameter above to access event object if you need
console.log(someProp)
this.setState({
touchedId: someId
})
}

查看下面的工作零食

https://snack.expo.io/@prashand/从react原生触摸事件访问道具

Answer 3

将所需信息绑定到回调并为每个子级分配一个信息，可以避免在每次子级渲染时重新创建回调。

class Hello extends React.Component{
state = { names: this.props.names.map((name, i) => {
return Object.assign({
onClick: this._onClick.bind(this, i, this.props),
}, name)
}),
};
_onClick(ind, _props, e) {
alert('props:' + JSON.stringify(_props));
}
render() {
const { names } = this.state;
return (
<div>
{ names.map((name, i) => (
<div key={i}>Name: <input value={ name.first } onClick={ name.onClick } /></div>
))}
</div>
)}
}
ReactDOM.render(
<Hello names={[{first:'aaa'},{first:'bbb'},{first:'ccc'}]}/>,
document.getElementById('container')
);

JS Fiddle