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

Posted 2023-03-24

【中文标题】scalajs-react：如何从状态对象的 Seq 中获得多行文本字段？

【英文标题】：scalajs-react: How to have multiline text field from a Seq in state object?

【发布时间】：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 上添加换行符。

如何实现？

【参考方案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))