如何为React TextField设置值？按钮赋值后点击清空问题解决

你遇到的问题核心是：这个TextField是受控组件，它的值完全由React状态values.nomeSocial驱动。直接用原生JS修改DOM的value只是临时改变了视图显示，并没有更新React内部的状态——当输入框失焦时，组件重新渲染，会从状态里读取原始值，导致输入框被清空。

下面分两种场景给出解决方案：

场景1：可以修改React代码（推荐方案） #

直接更新对应的状态即可，最符合React的设计逻辑：

• 如果项目里用了自定义的handleChange，可以直接调用这个方法，传入模拟的事件对象：

  // 构造符合handleChange预期的事件对象
  const mockEvent = {
    target: {
      name: 'nomeSocial',
      value: '你的目标内容'
    }
  };
  handleChange(mockEvent);
  

• 如果用了Formik、React Hook Form这类表单库，直接调用库提供的状态更新方法，比如Formik的setFieldValue：

  setFieldValue('nomeSocial', '你的目标内容');
  

场景2：只能用原生JS（无法修改React代码） #

需要在修改DOM值后，手动触发React能识别的合成事件，让React同步更新状态：

const inputEl = document.getElementsByName("nomeSocial")[0];
// 1. 设置输入框值
inputEl.value = "你的目标内容";
// 2. 触发input事件（React监听此事件来同步状态）
inputEl.dispatchEvent(new Event('input', { bubbles: true }));

触发input事件后，组件的onChange回调会被调用，进而更新values.nomeSocial状态，这样失焦时输入框就不会清空了。如果onChange监听的是change事件，就换成触发change事件。

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