React中antd Form的TextArea按下空格添加标签后无法清空该如何解决？

核心问题 #

• Ant Design Form 组件优先级覆盖：你给<Item>设置了name='tags'属性，此时Form会自动接管内部TextArea的value、onChange等状态逻辑，你自行维护的text状态和手动绑定的value={text}不会生效，输入框的值完全由Form内部状态控制，所以你调用setText('')自然不会对输入框产生任何效果，这也是你加了监听tags的useEffect也无效的核心原因。
• 事件默认行为未拦截：按下空格键触发onKeyDown时，你没有阻止浏览器默认行为，就算没有Form接管的问题，你清空输入框后，浏览器默认会把空格字符输入到输入框中，等于刚清空又被填上了空格。
• setState异步特性问题：第一个版本的代码中，setText(value.target.value)是异步更新，你后续马上取text变量拿到的还是更新前的旧值，存入tags数组的内容会出现滞后。

解决方案 #

根据你的使用场景二选一即可：

方案1：保留Form管控（需要用到表单校验、统一提交取数） #

不需要自行维护text状态，直接使用Form提供的实例方法操作字段值：

// 先声明Form实例
const [form] = Form.useForm();

const addTag = (e) => {
  if (e.keyCode === 32) {
    e.preventDefault(); // 拦截空格默认输入行为
    const inputValue = e.target.value.trim();
    // 过滤空值避免添加空标签
    if (inputValue) {
      setTags([...tags, inputValue]);
      // 调用Form实例方法清空对应字段
      form.setFieldValue('tags', '');
    }
  }
}

组件部分不需要改动，保留<Item name="tags">和onKeyDown={addTag}即可，TextArea不需要绑定value和onChange。

方案2：自行维护状态（不需要Form管控该字段） #

删除<Item>上的name='tags'属性，让Form放弃对该控件的状态接管，你绑定的value={text}才会生效：

const addTag = (e) => {
  if (e.keyCode === 32) {
    e.preventDefault(); // 拦截空格默认输入行为
    const inputValue = text.trim();
    if (inputValue) {
      setTags([...tags, inputValue]);
      setText('');
    }
  }
}

组件部分保留TextArea的value={text}、onChange={v => setText(v.target.value)}和onKeyDown={addTag}即可。

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