scalajs-react：如何在循环 Seq 时知道条目的索引？

Question

我们如何在 scalajs-react 组件中循环集合时获取索引？所以基本上我有这样的代码：

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

所以如果用户更改了一个字段，我需要知道employees中的哪个员工被更改了。所以我需要知道相应的索引或者是否有其他更好的方法。

Answer 1

您可以使用标准的 Scala zipWithIndex 方法：

employees.zipWithIndex.map{ case (employee, index) =>

然后使用 index 标记适当的 input 元素。

Answer 2

第二个参数是循环索引

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

scalajs-react：如何在循环 Seq 时知道条目的索引？

scalajs-react: How to know index of the entry while looping a Seq?

reactjs

scala

scala.js

scalajs-react