如何更改列表中的元素後點擊它

我是新的reactJS，並反應原生。我需要建議。我很難理解如何創建列表元素的工作行爲。如何更改列表中的元素後點擊它

所以。我有父組件，它在scrollView中創建任務。

 <ScrollView> 
      {this.state.tasks.map(function(ele) { 
      return (
       <Task 
       action={this.handler} 
       key={ele.id} 
       title={ele.title} 
       subtitle={ele.subtitle} 
       state={ele.state} 
       /> 
      ); 
      })} 
     </ScrollView>

我父組件具有狀態變量任務構造定義。

this.state = { 
    tasks: [ 
    { title: "A1", subtitle: "xyz", state: 0, id: 0 }, 
    { title: "A2", subtitle: "zyx", state: 0, id: 1 }] 
}

如果點擊特定的任務，我想將狀態更改爲1。我試圖通過這樣做達到：https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-component-in-react 但是，這是行不通的。

來源

2017-08-31 Yurrili

需要查看更多代碼 - 爲方便起見，這是一種縮寫格式嗎？處理程序在ScrollView組件中聲明在哪裏？ – Mikkel

@Mikkel除此之外沒有太多的代碼，我應該粘貼子代碼（Task）組件，還是我的「搞亂解決方案」版本？ – Yurrili

你沒有提供多少背景，但基本上應該是足以讓id在handler調用特定的任務，無論是在較低Task組件級別提供，或者當你正在創建的元素綁定（通過做這樣的事情：

action={this.handler.bind(this, ele.id)}

，之後呼叫handler()在Task級別已經包含正確的ID。

然後在您的handler方法中，手頭上有id，然後可以在您的狀態下修改適當的任務。這樣做有點煩人，乾淨利落 - 你必須採取舊的任務列表，並修改適當的任務來創建一個新的列表。之後，您可以使用this.setState(newTaskList)修改狀態。

來源

2017-08-31 10:30:04 jlaitio

感謝您的回答，但我還有一個小問題。 addind這一行：「action = {this.handler.bind（this，ele.id）}」創建錯誤「undefind不是一個對象（評估'this.handler.bind'） – Yurrili

好點 - 這是由於在裏面一個匿名函數，'this'實際上並不涉及你認爲它指的是什麼，它指的是非常空的函數上下文。你需要在函數外部引用原始'this'（' var self = this'然後引用'self'），或者使用[arrow函數]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions） – jlaitio

進一步思考，這可能是你遇到的核心問題，這是React開發中一個非常根本和不平凡的問題 - 例如[本文]（http://reactkungfu.com/2015/07/why-and-how- to-bind-methods-in-your-react-component-classes /） – jlaitio

從我所瞭解的情況來看，您希望更新您的任務中的「狀態」屬性以執行特定任務。在你的處理器，你可以做這樣的事情：

handler(ele) { 
    let updatedTasks = this.state.tasks.map((task)=> { 
    if(ele.id === task.id) { 
     return Object.assign({}, task, { 
      state: 1 
     }); 
     } else { 
     return task; 
     } 
    }) 

    //Set the new state 
    this.setState({ 
    tasks: updatedTasks 
    }) 
}

在您的滾動型的動作應該是：

action={(ele) => this.handler(ele)}

來源

2017-08-31 10:29:37 Dev

我試過你的解決方案。但是元素沒有改變。狀態改變應該導致這個列表元素的狀態改變。所以也許它正在工作，但我在別處分解了我的代碼，我會進一步調查。我必須先找到如何記錄一些信息。 – Yurrili

@Yurrili，這應該工作。 – Dev

如何更改列表中的元素後點擊它

回答

相關問題