Question

我是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 但这不起作用。

Answer 1

根据我的理解，您希望更新“状态”状态。特定任务的任务属性。在你的处理程序中，你可以这样做：

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

在您的ScrollView操作中应该是：

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

Answer 2

您没有提供太多上下文，但基本上应该足以在id调用中为您的特定任务提供handler，方法是在Task下方提供action={this.handler.bind(this, ele.id)}组件级别，或在创建元素时绑定它（通过执行以下操作：

handler()

，之后在Task级别调用handler已包含正确的ID。

然后在您的id方法中，您拥有this.setState(newTaskList)，然后可以修改您所在州的正确任务。以干净的方式做这有点烦人 - 您必须使用旧的任务列表并创建一个新的列表，并修改适当的任务。之后，您可以使用ldap_initialize修改状态。

单击后如何更改列表元素

2 个答案: