0

我通过迭代序列在 UI 上呈现了一系列项目。在 UI 上，每个项目都填充到这样的表单中：

<.div(
          state.employees.zipWithIndex.map{ employee =>
            <.form(
              <.label("Name of the employee:",
                <.input(^.`type` := "text", ^.cls := "form-control",
                  ^.value := employee.name, onChange ==> updateEmployeeName)),
              <.br,
              <.label("Addresses:",
                <.input(^.`type` := "textarea", ^.rows := 100, ^.cols := 20,^.cls := "form-control",
                  ^.value := employee.addresses.mkString(",")))
              
            )
    }.toVdomArray
)

def updateEmployeeName(event: ReactEventFromInput): Callback = {
    val updatedName = event.target.value
    $.modState(...update the individual item here)
  }

所以现在我可以访问单个项目及其索引。现在我的想法是用户可以修改字段，这将触发一些功能（例如，onChange ==> updateEmployeeName），然后我在单个项目级别更新反应组件的状态。

但似乎不可能，因为我无法将索引传递给 updateEmployeeName，因此我无法在 updateEmployeeName 中检测到列表中的哪个项目被修改。

有什么办法解决吗？

4

0 回答 0