[英]Remove multiple components in react native
我知道如何通过更改状态来添加和删除单个组件。 但是,如果要删除多个组件,这种方法将行不通。 例如,假设我有3个视图。 当我单击它们时,如何删除它们。
示例代码:
class Example extends Component {
render(){
return (
<View>
<View>
<TouchAbleOpacity onPress={() => this.removeView()}>
<Text>Remove View 1</Text>
</TouchAbleOpacity>
</View>
<View>
<TouchAbleOpacity onPress={() => this.removeView()}>
<Text>Remove View 2</Text>
</TouchAbleOpacity>
</View>
<View>
<TouchAbleOpacity onPress={() => this.removeView()}>
<Text>Remove View 3</Text>
</TouchAbleOpacity>
</View>
</View>
)
}
removeView(){
}
}
另一个例子是当我有一个带有按钮的ListView时。 这些是邀请用户的按钮。 当我单击按钮时,我想在ListView中隐藏该特定行的按钮。
有什么建议么?
感谢Giorgos,我为自己的问题找到了解决方案。 我创建了一个单独的组件,该组件内部具有hide函数。 现在,我可以只在视图或listView中的任何位置添加此组件,当我单击它时它将隐藏。 请记住,这只会隐藏组件,而不会卸载它。
这只是一个示例,所以我创建了一个按钮组件。
我的按钮组件:
class ButtonComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
hide:false
}
}
render() {
return (
<View style={styles.container}>
{this.renderButtonComponent()}
</View>
);
}
renderButtonComponent(){
if(!this.state.hide){
return (
<TouchableOpacity onPress={this.hide.bind(this)}>
<Text>Button</Text>
</TouchableOpacity>
);
}
}
hide(){
this.setState({
hide:true
});
}
}
在我的视图中,我只是渲染我的组件:
render() {
return (
<View style={styles.container}>
<ButtonComponent/>
<ButtonComponent/>
<ButtonComponent/>
</View>
);
}
您必须使用组件的状态。 每当调用setState
,都会再次触发组件的render()
函数。 根据当前状态,您可以决定显示什么和不显示什么。 例如:
class Example extends Component {
constructor(props){
// initialize state
this.state = {
isView1Visible: true,
isView2Visible: true,
isView2Visible: true
}
}
render(){
return (
<View>
{ this.renderView1() }
{ this.renderView2() }
{ this.renderView3() }
</View>
)
}
renderView1(){
if(this.state.isView1Visible){
return (
<View>
<TouchAbleOpacity onPress={() => this.setState( {isView1Visible: false} )}>
<Text>Remove View 1</Text>
</TouchAbleOpacity>
</View>
)
}
renderView2(){
if(this.state.isView2Visible){
return (
...
)
}
renderView3(){
if(this.state.isView3Visible){
return (
...
)
}
}
在上面的示例中,您基于当前状态渲染视图。 单击按钮后,可以通过调用setState()
来更新状态,就像我前面提到的那样,它将触发另一个对render()
调用。
使用ListView
的方法相同,但是实现略有不同。 您需要执行的操作是将项目列表保存在组件状态下,并且每当要添加/删除项目时,都将相应地更新列表,然后使用setState
更新状态。 例如,类似于以下内容:
constructor(props) {
super(props);
var list = [ ... ]
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
this.state = {
dataSource: ds,
items: ds.cloneWithRows(list)
};
}
render() {
return (
<View>
<ListView
dataSource={this.state.items}
renderRow={(rowData) => this.renderRow(rowData) /> } />
</View>
)
}
renderRow(rowData) {
<View>
<TouchAbleOpacity onPress={() => this.updateList()}>
<Text>Remove View 1</Text>
</TouchAbleOpacity>
</View>
}
updateList() {
// do some changes to your list and update the state.
var newItems = ...
this.setState({
items: newItems
})
}
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.