scalajs-react中遍历Seq时如何获取对应元素的索引？

直接获取索引的实现方式 #

你可以直接调用Scala集合的zipWithIndex方法，将元素和对应索引配对后遍历，修改后的代码如下：

<.div(
  employees.zipWithIndex.map { case (employee, index) =>
    <.form(
      <.label("Name of the employee:",
        <.input(^.`type` := "text", ^.cls := "form-control",
          ^.value := employee.name,
          // 索引直接传入修改回调即可定位对应员工
          ^.onChange ==> (e => handleNameChange(index, e.target.value))
        )
      ),
      <.br,
      <.label("Addresses:",
        <.input(^.`type` := "textarea", ^.rows := 100, ^.cols := 20,^.cls := "form-control",
          ^.value := employee.addresses.mkString(","),
          ^.onChange ==> (e => handleAddressChange(index, e.target.value))
        )
      )
    )
  }
)

注意：如果你的employees数组会发生增删、排序等操作，不要把索引作为React元素的key属性传入，会导致组件状态复用错误，优先用员工的唯一业务ID作为key。

更优实现推荐 #

• 给Employee类添加唯一业务标识字段（比如员工ID），绑定修改回调时直接传递该ID而非索引，后续逻辑不受数组顺序变化影响，稳定性更高
• 可以把单个员工的表单逻辑封装为独立组件，将employee实例、修改回调作为组件Props传入，父组件仅需处理修改后的数据更新，代码解耦性和可维护性更好

内容的提问来源于stack exchange，提问作者Mandroid