微信小程序输入多行文本的实战记录

本文将详细讲解微信小程序如何实现输入多行文本功能，并提供两条示例说明。

1. 使用 textarea 组件

在微信小程序中，可以使用 textarea 组件实现多行文本输入。我们先来看一个示例：

<view>
  <textarea bindinput="onInput" placeholder="请输入文字"></textarea>
</view>

这个示例中，我们通过 textarea 组件创建了一个文本域，当用户输入文本时，会触发 bindinput 事件，可以通过这个事件来获取用户输入的值。为了让用户知道在这个文本域中可以输入什么，我们给它添加了一个占位符提示语，即 placeholder 属性。

接下来我们需要通过 JavaScript 来处理用户输入，所以需要在对应的页面或组件中定义 onInput 方法。

Page({
  data: {
    text: ''
  },

  onInput(event) {
    this.setData({
      text: event.detail.value
    })
  }
})

这个示例中，我们在 data 中定义了一个 text 变量用来存储用户输入的值。当用户在 textarea 中输入文本时，onInput 方法会被触发，通过 event.detail.value 获取输入的值，并将它存储到 text 变量中。

2. 显示输入的内容

当用户输入文本并触发 bindinput 事件后，我们需要将它显示到页面上。我们可以将 textarea 组件和一个展示输入内容的 text 组件放在一起。

<view>
  <textarea bindinput="onInput" placeholder="请输入文字"></textarea>
  <text>{{text}}</text>
</view>

在 text 组件中使用了双花括号 {{}} 语法来将 text 变量的值渲染到页面上。如果用户输入了文本，text 变量的值就会发生变化，从而更新页面中的展示内容。

3. 示例说明

下面提供两个示例，让大家更好的了解如何在实际开发中使用 textarea 组件来实现多行文本输入。

示例一：留言板功能

在留言板功能中，用户可以在输入框中输入多行文字，并将输入的内容存储到数据库中。同时也需要在页面中展示所有用户的留言。

<view>
  <form bindsubmit="onSubmit">
    <textarea name="message" bindinput="onInput" placeholder="请输入留言"></textarea>
    <button formType="submit">提交</button>
  </form>
  <view wx:for="{{messages}}" wx:key="{{index}}">
    <text>{{item.content}}</text>
  </view>
</view>

在这个示例中，我们定义了一个 form 表单，当用户提交表单时，触发 onSubmit 方法。在 form 表单中包含一个 textarea 组件和一个提交按钮，当用户在 textarea 中输入内容时，触发 onInput 方法。同时，在页面中使用了 wx:for 循环来依次渲染所有用户的留言。

Page({
  data: {
    messages: []
  },

  onInput(event) {
    this.setData({
      content: event.detail.value
    })
  },

  onSubmit(event) {
    const { content } = event.detail.value
    const message = { content }
    this.setData({
      messages: [...this.data.messages, message]
    })
  }
})

在 onInput 方法中，我们将用户输入的内容赋值给 content 变量。在 onSubmit 方法中，我们通过 event.detail.value 获取用户提交的表单数据，然后创建一个新的留言对象并将它添加到 messages 数组中。因为 messages 是存储在组件中的状态，所以在添加新的留言后，页面会被自动更新。

示例二：电子表格功能

在电子表格功能中，用户可以在输入框中输入多行文字，并将输入的内容存储到二维数组中。同时也需要在页面中展示该二维数组。

<view>
  <form bindsubmit="onSubmit">
    <textarea name="rowData" bindinput="onInput" placeholder="请输入行数据"></textarea>
    <button formType="submit">添加行</button>
  </form>
  <table>
    <tbody>
      <tr wx:for="{{tableData}}" wx:key="{{index}}">
        <td wx:for="{{item}}" wx:key="{{index}}">{{item}}</td>
      </tr>
    </tbody>
  </table>
</view>

在这个示例中，我们定义了一个 form 表单，当用户提交表单时，触发 onSubmit 方法。在 form 表单中包含一个 textarea 组件和一个提交按钮，当用户在 textarea 中输入内容时，触发 onInput 方法。同时，在页面中使用了 wx:for 循环来依次渲染所有的行和列。

Page({
  data: {
    tableData: []
  },

  onInput(event) {
    this.setData({
      rowData: event.detail.value
    })
  },

  onSubmit(event) {
    const { rowData } = event.detail.value
    const row = rowData.trim().split(/\s+/)
    this.setData({
      tableData: [...this.data.tableData, row]
    })
  }
})

在 onInput 方法中，我们将用户输入的内容赋值给 rowData 变量。在 onSubmit 方法中，我们通过 event.detail.value 获取用户提交的表单数据，然后按照空格符分割字符串创建一个新的行数据数组并将它添加到 tableData 数组中。因为 tableData 是存储在组件中的状态，所以在添加新的行后，页面会被自动更新。