Twitter项目回复功能Bug：输入值仅对单条推文生效

问题现象 #

开发Twitter复刻项目时，回复模块已成功渲染到每条推文下方，但仅某一条推文能正常接收回复输入框的内容，其余推文点击「Post」按钮后，添加的回复内容均为空白。

问题根源 #

1. 重复ID冲突：渲染回复输入框时，所有推文的输入框都使用了固定的id="reply-input"，而HTML规范中ID必须唯一，浏览器只会识别DOM中第一个匹配该ID的元素。
2. 错误的内容获取逻辑：handlePostBtnClick函数中通过document.getElementById("reply-input")获取输入值，无论点击哪条推文的发布按钮，都会取到第一条输入框的内容（若该输入框为空，就会导致空白回复）。

解决方案 #

步骤1：修改输入框的标识为动态唯一值 #

将原固定ID改为基于推文uuid的data属性，确保每个输入框与对应推文一一绑定：

// 原渲染代码片段
repliesHtml += `
<div class="tweet-input-area">
  <img src="images/scrimbalogo.png" class="profile-pic">
  <textarea id="reply-input" placeholder="Write a reply"></textarea>
</div>
<button id="post-btn" data-post="${tweet.uuid}">Post</button>
`

// 修改后代码片段
repliesHtml += `
<div class="tweet-input-area">
  <img src="images/scrimbalogo.png" class="profile-pic">
  <textarea data-reply-input="${tweet.uuid}" placeholder="Write a reply"></textarea>
</div>
<button id="post-btn" data-post="${tweet.uuid}">Post</button>
`

步骤2：调整回复内容获取逻辑 #

在handlePostBtnClick中，通过推文uuid精准定位对应的输入框，获取正确的输入内容：

// 原回复函数
function handlePostBtnClick(tweetId){
  let postValue = document.getElementById("reply-input").value
  // ...其余代码
}

// 修改后回复函数
function handlePostBtnClick(tweetId){
  // 通过data属性定位当前推文的输入框
  let postValue = document.querySelector(`[data-reply-input="${tweetId}"]`).value
  console.log(postValue)
  
  const targetTweetObj = tweetsData.filter(tweet => tweet.uuid === tweetId)[0]

  targetTweetObj.replies.unshift({
    handle: "@Scrimba",
    profilePic: "images/scrimbalogo.png",
    tweetText: postValue
  })
  
  render()
}

额外优化建议 #

• 发布回复后清空对应输入框内容，提升用户体验：在render()调用前添加document.querySelector([data-reply-input="${tweetId}"]).value = ''
• 给textarea添加非空校验，避免发布空白回复

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