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(",")))
              
            )
    )
)

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

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(",")))
              
            )
    ))