React 18中Textarea输入框仅支持单行输入如何解决

HTML 标准中不存在 type="textarea" 的 input 类型，浏览器解析到不识别的 input type 时，会默认回退为单行的 type="text" 输入框，这就是你设置 rows、wrap 等属性完全不生效的根本原因。多行文本输入需要使用独立的 <textarea> 标签，而非修改 input 的 type 属性。

1. 替换JSX中的输入标签 #

把原来的 input 标签替换为标准 textarea 标签，你现有的 useState 受控逻辑、onChange 取值逻辑完全可以复用，不需要修改状态相关代码。注意JSX中 label 的 for 属性需要写成 htmlFor，否则会出现React语法警告。

修改后的对应JSX代码：

<div className="event-form-container">
  <h1 id="event-title">Create a New Event</h1>
  <form className="create-event-form" onSubmit={handleSubmit}>
    <label className="event-label" htmlFor="description">
      Description
      <textarea
        id="description"
        className="event-input textarea"
        value={description}
        rows="5"
        cols="33"
        wrap="soft"
        onChange={(e) => setDescription(e.target.value)}
      />
    </label>
  </form>
</div>

2. 调整CSS选择器，复用现有样式 #

你原来的公共样式只匹配了 input 和 select 标签，textarea 不会继承这些样式，只需要把 textarea 加入公共选择器即可，不会影响其他已经使用 event-input 类的单行输入框。

调整后的对应CSS代码：

/* 把textarea加入公共选择器，复用原有输入框样式 */
input,
select,
textarea {
    background-color: rgb(79, 73, 73);
    color: white;
    border-radius: 3px;
    box-sizing: border-box;
    width: 25%;
    border: none; /* 去掉浏览器默认的textarea边框，和其他输入框样式统一 */
}

.textarea {
    height: 6em;
    resize: vertical; /* 允许用户垂直拖拽调整输入框高度，使用体验更好 */
}

.event-label,
.event-input {
    display: block;
    width: 25%
}

.event-input {
    position: absolute;
    padding: 10px;
}

• 如果你发现textarea的位置因为position: absolute出现偏移，只需要给父级.event-label加上position: relative即可，不会影响其他表单元素。
• textarea在React中的受控用法和文本类型的input完全一致，都是通过value属性绑定状态、onChange事件更新状态，不需要额外调整逻辑。

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