scalajs-react:如何在状态对象中使用Seq中的多行文本域？

Question

我在一个scalajs-react应用程序中工作。我拥有的UI字段之一是多行文本的输入字段，它被映射到state object的属性。状态对象定义：

case class Person(name: String, addresses: Seq[String])

我有相应的地址UI字段，如下所示：

 <.label("Addresses:",
              <.input(^.`type` := "text", ^.cls := "form-control",
                ^.value := person.addresses.mkString("\n"), ^.onChange ==> updateAddresses))

def updateAddresses(event: ReactEventFromInput): Callback = {
    val updatedAddresses = event.target.value.split("\\\\n").toSeq // based on some google search
    $.modState(prev => prev.copy(addresses = updatedAddresses))
  }

但它似乎不起作用。我无法在UI上添加换行项。

怎样才能实现呢？

Answer 1

对于多行文本输入，您必须使用textarea html标记。(参见https://www.w3schools.com/tags/tag_textarea.asp)

这是可行的：

<.label("Addresses:",
          <.textarea(^.`type` := "text", ^.cls := "form-control",
            ^.value := person.addresses.mkString("\n"), ^.onChange ==> updateAddresses))