点击Add_row按钮添加行后，如何重置第一行输入框内容？

嘿，这个需求其实挺简单的，核心就是在完成新行添加的逻辑之后，手动清空第一行的输入框就行啦！我分两种常见开发场景给你举例子：

原生HTML + JavaScript 场景 #

假设你的页面结构大概是这样的：

<!-- 第一行输入区 -->
<input type="text" id="firstInput" placeholder="输入内容...">
<button id="addRowBtn">Add_row</button>

<!-- 新行容器 -->
<div id="rowContainer"></div>

对应的JavaScript代码可以这么写：

// 获取页面元素
const firstInput = document.getElementById('firstInput');
const addRowBtn = document.getElementById('addRowBtn');
const rowContainer = document.getElementById('rowContainer');

// 绑定按钮点击事件
addRowBtn.addEventListener('click', () => {
  // 先拿到第一行的输入内容，顺便去掉首尾空格
  const inputValue = firstInput.value.trim();
  if (!inputValue) return; // 空内容就不添加新行啦

  // 创建新行元素并添加到容器里
  const newRow = document.createElement('div');
  newRow.textContent = inputValue;
  rowContainer.appendChild(newRow);

  // 重点：重置第一行输入框
  firstInput.value = '';
});

关键就是最后那行firstInput.value = ''，在新行添加完成后直接清空输入框内容。如果你的第一行输入框是用类名标识的，把getElementById换成querySelector('.你的类名')就行。

React 函数组件场景 #

如果是用React开发，逻辑类似，只是通过state来管理输入值和行列表：

import { useState } from 'react';

function RowAdder() {
  const [inputValue, setInputValue] = useState('');
  const [rows, setRows] = useState([]);

  const handleAddRow = () => {
    if (!inputValue.trim()) return;
    // 把当前输入值添加到行列表
    setRows([...rows, inputValue]);
    // 重置输入框的state
    setInputValue('');
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入内容..."
      />
      <button onClick={handleAddRow}>Add_row</button>
      <div className="row-list">
        {rows.map((row, index) => (
          <div key={index}>{row}</div>
        ))}
      </div>
    </div>
  );
}

export default RowAdder;

这里在点击按钮把输入值加入行列表后，直接调用setInputValue('')就能重置输入框，React会自动更新DOM展示。

不管是哪种场景，核心思路都是：先完成新行的添加操作，再清空第一行输入框的内容。

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