刪除反應本機

Question

多個組件我知道如何通過更改狀態來添加和刪除單個組件。但如果你有多個組件要刪除，這種方式不會工作。例如，讓我說我有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中特定行的按鈕。

有什麼建議嗎？

Answer 1

感謝Giorgos，我爲自己的問題找到了解決方案。我在組件內創建了一個帶有隱藏功能的獨立組件。現在我可以在視圖或列表視圖中的任何位置添加此組件，當我點擊它時，它將隱藏。請記住，這隻會隱藏組件並且不會卸載組件。

這只是一個例子，所以我創建了一個按鈕組件。

我的按鈕組件：

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> 
    ); 
    } 

Answer 2

你必須使用你的組件的狀態。無論何時調用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 
    }) 
    } 

希望這會有所幫助。