React.js中存储textarea字符串到数组时如何保留空格与换行？

你的核心需求是完整保留textarea输入中的空白行、连续空格等格式，其实textarea的原生值本身就包含这些格式，问题可能出在处理逻辑或后续展示环节。以下是两种可靠的实现方案：

方案1：受控组件（React推荐） #

通过useState绑定textarea的value，遵循React数据流规范，实时获取完整格式的输入内容：

const [entryArray, setEntry] = useState([]);
const [currentText, setCurrentText] = useState("What's on your mind?");

const handleSubmit = (event) => {
    event.preventDefault();
    // 直接将包含完整格式的文本推入数组
    setEntry(prevEntries => [...prevEntries, currentText]);
    // 清空输入框
    setCurrentText("");
}

return (
    <div>
        <form className="entryForm" onSubmit={handleSubmit} >
            <label htmlFor="newEntryId"> 
                <span>New Entry:</span>
                <textarea 
                    id="newEntryId" 
                    name="newEntryName" 
                    rows="30" 
                    cols="75" 
                    value={currentText}
                    onChange={(e) => setCurrentText(e.target.value)}
                /> 
            </label>
            <button type="submit">Submit</button>
        </form>
    </div>
)

关键说明 #

• 受控组件通过value和onChange双向绑定，能准确捕获用户输入的所有格式（换行、连续空格、空白行）
• 存储时直接使用currentText，内容与用户输入完全一致

方案2：优化非受控组件（兼容现有逻辑） #

如果坚持使用useRef，只需调整细节确保获取完整值，同时修正JSX语法问题：

const textAreaRef = useRef();   
const [entryArray, setEntry] = useState([]);

const handleSubmit = (event) => {
    event.preventDefault();
    // ref获取的值本身包含完整格式，直接存储即可
    const textValue = textAreaRef.current.value;
    setEntry(prevEntries => [...prevEntries, textValue]);
    textAreaRef.current.value = "";
}

return (
    <div>
        <form className="entryForm" onSubmit={handleSubmit} >
            <label htmlFor="newEntryId"> 
                <span>New Entry:</span>
                <textarea 
                    id="newEntryId" 
                    name="newEntryName" 
                    rows="30" 
                    cols="75" 
                    defaultValue="What's on your mind?" 
                    ref={textAreaRef} 
                /> 
            </label>
            <button type="submit">Submit</button>
        </form>
    </div>
)

注意事项 #

• JSX中需将class改为className，for改为htmlFor，符合React语法规范
• 若后续展示存储的内容，需通过CSS或<pre>标签保留格式：

  .entry-display {
      white-space: pre-wrap; /* 保留格式同时自动换行 */
  }
  

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