在React中如何将textarea与POST请求关联以提交JSON格式数据？

1. 基础页面结构编写 #

首先给textarea和提交按钮设置唯一id，方便后续JS获取节点读取内容、绑定触发事件：

<textarea id="contentArea" rows="8" cols="50" placeholder="请输入要提交的内容"></textarea>
<button id="submitBtn">提交内容</button>
<p id="msgTip"></p>

2. 核心逻辑实现 #

整体逻辑分为4步：监听提交触发事件→读取textarea最新值→构造JSON结构→发送POST请求，完整可运行代码如下：

// 提前获取DOM节点
const contentArea = document.getElementById('contentArea')
const submitBtn = document.getElementById('submitBtn')
const msgTip = document.getElementById('msgTip')

// 绑定提交触发事件
submitBtn.addEventListener('click', async () => {
  // 读取textarea当前最新值，用户修改后的内容会自动同步到value属性
  const inputVal = contentArea.value.trim()

  // 非空校验（可根据需求调整校验规则）
  if (!inputVal) {
    msgTip.textContent = '请输入内容后再提交'
    return
  }

  // 构造请求数据结构，按需扩展字段即可
  const reqData = {
    content: inputVal,
    submitTime: Date.now()
  }

  try {
    const res = await fetch('替换为你的后端接口地址', {
      method: 'POST',
      headers: {
        // 必须声明请求体格式为JSON，否则后端可能无法解析
        'Content-Type': 'application/json'
      },
      // 将JS对象转为JSON字符串作为请求体
      body: JSON.stringify(reqData)
    })

    if (res.ok) {
      const resData = await res.json()
      msgTip.textContent = '提交成功'
      console.log('接口返回结果：', resData)
    } else {
      msgTip.textContent = '提交失败，请重试'
    }
  } catch (err) {
    console.error('请求异常：', err)
    msgTip.textContent = '网络异常，请检查后重试'
  }
})

注意事项 #

• 如果textarea放在form标签内，需要在事件回调开头调用e.preventDefault()阻止表单默认的跳转提交行为
• 不要直接把JS对象传给fetch的body参数，必须用JSON.stringify()转为JSON字符串，否则请求体内容会变成[object Object]无法解析
• 无需额外做内容同步，textarea的value属性会实时同步用户的输入、修改操作，请求前读取该属性拿到的始终是最新值

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