在我的场景中,我正在显示带有删除图标的图像数组。一世 需要删除图像,同时单击删除图标。如何删除 这使用反应原生
这是示例代码。
var image=["uri1","uri2","uri3"] //image url
var GetImageField = React.createClass({
deleteImage:function(){
this._imageDelete.setNativeProps({height: 0});
},
render:function() {
var self =this;
return (<View>
{
image.map(function(val){
return (
<Image source={val} style={styles.uploadImage} ref={component => self._imageDelete = component}>
<TouchableHighlight underlayColor="#ffa456" onPress={self.deleteImage} style={{backgroundColor:'#fff'}}>
<Text style={styles.deleteImage} >delete</Text>
</TouchableHighlight>
</Image>)
})
}
</View>)
}
使用setNativeProps我只能删除第一个选定的图像。但我需要删除多个图像
答案 0 :(得分:2)
在React中处理这类事情的方法是使用组件状态。这些图像应该是初始状态,当您从状态中删除它们时,React将更新组件以反映更改:
var GetImageField = React.createClass({
getInitialState: function() {
return {
images: ["uri1", "uri2", "uri3"]
}
},
deleteImage: function(val) {
this.setState({
images: this.state.images.filter(function(img){
return img !== val
})
});
},
render: function() {
var self = this;
return ( < View >
{
this.state.images.map(function(val) {
return ( < Image source = {val}
style = {styles.uploadImage}
ref = {component => self._imageDelete = component} >
< TouchableHighlight underlayColor = "#ffa456"
onPress = {self.deleteImage.bind(self, val)}
style = {{ backgroundColor: '#fff'}} >
< Text style = {styles.deleteImage} > delete < /Text>
</TouchableHighlight >
< /Image>)
})
}
</View > )
}
&#13;
答案 1 :(得分:-1)
this.setState({
arrayholder: this.state.arrayholder.filter(function(img){
return img !== key
})
});