如何更改列表中的元素后点击它

我是新的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

如何更改列表中的元素后点击它

回答

相关问题