如何实现MUI TextField点击保存按钮直接录入值？

核心思路 #

把添加输入值的逻辑抽成独立复用的函数，同时绑定到保存按钮的点击事件和原有的空格/回车键盘事件上，既实现点击按钮直接保存的需求，又保留原有键盘触发的逻辑，还能避免onInput带来的实时触发问题。

修改后的代码实现 #

1. 提取通用的添加逻辑函数：

const handleAddValue = () => {
  const value = inputValue.trim();
  if (value && !passportIds.includes(value)) {
    field.onChange(field.value.concat(value));
    setInputValue("");
  }
};

2. 更新TextField绑定并给保存按钮添加事件：

<TextField
  {...params}
  label="label"
  autoFocus
  value={inputValue}
  onChange={(e) => setInputValue(e.target.value)}
  onKeyDown={(e) => {
    if (e.code === "Space" || e.code === "Enter") {
      e.preventDefault(); // 避免空格被输入到文本框
      handleAddValue();
    }
  }}
/>

{/* 保存按钮绑定点击事件 */}
<Button onClick={handleAddValue} variant="contained">
  保存
</Button>

关键细节说明 #

• 移除onChange里的trim()：把字符串修剪逻辑统一放到handleAddValue中，避免输入过程中实时修剪导致的光标跳动问题，同时保证最终保存的是处理后的值。
• 为什么onInput会出问题？：onInput事件会在每输入一个字符时就触发一次，所以每打一个字就会执行添加逻辑生成芯片，这和“主动触发保存”的需求不符。
• 键盘事件加e.preventDefault()：按下空格时阻止默认输入行为，避免文本框中出现多余空格。

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