scalajs-react：如何从状态对象的 Seq 中获得多行文本字段？答案

【问题标题】：scalajs-react: How to have multiline text field from a Seq in state object?scalajs-react：如何从状态对象的 Seq 中获得多行文本字段？
【发布时间】：2021-11-22 22:45:05
【问题描述】：

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

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 上添加换行符。

如何实现？

【问题讨论】：

标签： javascript reactjs scala.js scalajs-react

【解决方案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))

【讨论】：