React中如何为.map生成的每个元素单独设置块级显示？

我想通过.map方法渲染不同数量的文本输入框，让它们以块级形式堆叠显示，但当前CSS规则似乎没有作用到每个输入框上。请问该如何实现文本输入框的堆叠显示？相关代码如下：

文本输入框初始化代码 #

export default function App() {
  const [textInputs, setTextInputs] = useState({});
  // 用这个状态变量动态设置输入框数量
  const [numLines, setNumLines] = useState(6);

返回值代码 #

return (
    <div className="App">
      <Header />
      <h1 className="tool-textheader">write...</h1>
      <div className="tool-container">
        {[...Array(numLines).keys()].map((i) => {
          return (
            <div key={`tool${i}`} className="tool-item">
              <input
                className="input-lines"
                type="text-area"
                value={textInputs[`input${i}`]}
                onChange={(e) => handleOnChange(e.target.value, i)}
              />)

CSS代码 #

.input-lines {
  display: block;
  width: 90%;
  margin-left: 30px;
  margin-bottom: 5px;
}

1. 修正输入框的类型错误 #

HTML的<input>标签不存在type="text-area"这个合法属性值，浏览器会以默认规则渲染输入框，直接干扰CSS的块级显示效果：

• 若需要单行输入，将type改为text；
• 若需要多行输入，直接改用<textarea>标签（而非input）。

修正后的单行输入框代码：

<input
  className="input-lines"
  type="text"
  value={textInputs[`input${i}`] || ''} {/* 添加默认值避免显示undefined */}
  onChange={(e) => handleOnChange(e.target.value, i)}
/>

多行输入框代码示例：

<textarea
  className="input-lines"
  value={textInputs[`input${i}`] || ''}
  onChange={(e) => handleOnChange(e.target.value, i)}
/>

2. 确保父容器布局不干扰堆叠 #

检查tool-container的CSS，如果它设置了display: flex且flex-direction: row，会强制子元素横向排列。需要改为纵向布局，或者移除flex设置让块级元素自然堆叠：

.tool-container {
  /* 若之前是flex横向布局，改为纵向 */
  display: flex;
  flex-direction: column;
  gap: 5px; /* 可用gap替代margin-bottom，更简洁地控制输入框间距 */
}

3. 完善状态更新逻辑 #

确保handleOnChange能正确更新每个输入框的状态：

const handleOnChange = (value, index) => {
  setTextInputs(prevState => ({
    ...prevState,
    [`input${index}`]: value
  }));
};

完成以上调整后，输入框就会以块级形式堆叠显示了。

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