react-native - 如何访问 React Native 中的数据属性?
问题描述
在 React 中,最佳实践是在父节点上放置一个 onClick 事件并使用 event.target 访问子节点的属性,如下所示。你如何在 React Native 中做到这一点?
handleClick = (event) => {
this.setState({
color: event.target.dataset.color
})
}
render(){
return(
<div onClick={this.handleClick}>
<div data-color="red"></div>
<div data-color="green"></div>
<div data-color="yellow"></div>
<div data-color="blue"></div>
<div data-color="gray"></div>
</div>
)
}
在 React Native 中,我发现如何做到这一点的唯一方法是为每个孩子添加一个 onPress ......问题是:这是最佳实践吗?有没有更好的方法,比如添加数据属性并以某种方式访问它们?
handlePress = (color) => {
this.setState({
color
})
}
render(){
return(
<View>
<TouchableOpacity onPress={this.handlePress.bind(this, "red")}>
<View></View>
<TouchableOpacity/>
<TouchableOpacity onPress={this.handlePress.bind(this, "green")}>
<View></View>
<TouchableOpacity/>
<TouchableOpacity onPress={this.handlePress.bind(this, "yellow")}>
<View></View>
<TouchableOpacity/>
<TouchableOpacity onPress={this.handlePress.bind(this, "blue")}>
<View></View>
<TouchableOpacity/>
<TouchableOpacity onPress={this.handlePress.bind(this, "gray")}>
<View></View>
<TouchableOpacity/>
</View>
)
}