React中如何仅用特定值更新字符串数组（MUI TextField场景）

核心问题分析 #

1. 逗号出现原因：你把数组text直接绑定到TextField的value属性，React会自动将数组转为逗号分隔的字符串，这就是每行开头出现逗号的根源。
2. 手动输入重复累加：TextField的onChange返回的是整个文本框的完整内容，你直接把这个完整内容push到数组，导致重复叠加全部内容。

修改后的代码实现 #

状态定义与核心函数

// 状态改为存储完整文本字符串，而非数组
const [text, setText] = useState('');

// 清空文本框
function clearTemplateBox() {
    setText('');
}

// 下拉选择事件处理：将选中短语追加到现有文本后
const handleChange = (event: SelectChangeEvent) => {
    const selectedPhrase = event.target.value as string;
    setTemplate(selectedPhrase);
    // 追加选中短语，用两个换行符和现有内容分隔
    setText(prevText => `${prevText}${prevText ? '\n\n' : ''}${selectedPhrase}`);
};

// 手动输入事件处理：直接更新完整文本
function handleManualInput(event: React.ChangeEvent<HTMLInputElement>) : void {
    setText(event.target.value);
}

TextField组件

<TextField
    id='template-text-area'
    ref={ref}
    aria-label="minimum height"
    multiline={true}
    rows={28}
    style={{ width: '95%', border: '2px solid lightgrey' }}
    value={text}
    onChange={handleManualInput}
/>

额外说明 #

如果需要单独记录每一次添加的内容（比如区分下拉选择的短语和手动输入的内容），可以额外维护一个数组状态，比如contentHistory，每次下拉选择时push短语，手动输入时可根据需求拆分新增内容，但TextField的显示仍用拼接后的字符串text。示例：

const [contentHistory, setContentHistory] = useState<string[]>([]);

// 下拉选择时同时更新历史数组
const handleChange = (event: SelectChangeEvent) => {
    const selectedPhrase = event.target.value as string;
    setTemplate(selectedPhrase);
    setContentHistory(prev => [...prev, selectedPhrase]);
    setText(prev => `${prev}${prev ? '\n\n' : ''}${selectedPhrase}`);
};

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