使用Formik.setFieldValue时Material UI输入表单清空失效问题

问题场景 #

在React + MUI技术栈中，使用开启multiple和freeSolo的Autocomplete组件，结合Formik做表单管理，自定义renderTags渲染标签时遇到以下问题：

• 按下空格添加标签后，执行e.target.value=''无法清空输入框
• 移除formik.setFieldValue后，清空操作可正常生效
• 尝试单独维护tags状态变量绑定输入框，依然无法解决：标签能成功添加，但输入框内容始终无法清除

问题根源 #

1. 状态覆盖：调用formik.setFieldValue更新tags数组后，Formik会触发组件重渲染，Autocomplete/TextField会根据Formik的状态重新渲染，此时手动设置的target.value=''会被组件内部的状态覆盖，导致清空失效。
2. 错误的value绑定：原代码中TextField错误绑定了value={formik.values.tags}（这是数组类型），而输入框需要的是字符串类型的输入内容，这会干扰输入框的状态管理逻辑。

解决方案 #

核心思路 #

放弃直接操作DOM修改输入框值，改用Formik管理输入框的临时内容，结合Autocomplete的inputValue和onInputChangeAPI来控制输入状态，确保状态更新和组件渲染一致。

具体步骤 #

1. 在Formik的初始值中新增一个临时字段（比如tagInput），用于存储输入框的当前内容。
2. 将Autocomplete的inputValue绑定到这个临时字段，通过onInputChange同步输入内容到Formik。
3. 在onKeyPress事件中，阻止空格的默认行为，添加标签后直接通过Formik清空临时字段，触发输入框自动清空。

修正后的完整代码 #

<Grid sx={{ pb: 2 }}>
  <Autocomplete
    multiple
    id="tags"
    options={[]} // 可添加预设标签选项
    freeSolo
    value={formik.values.tags}
    // 绑定输入框值到Formik临时字段
    inputValue={formik.values.tagInput || ''}
    onChange={(event, newValue) => {
      formik.setFieldValue('tags', newValue);
    }}
    // 同步输入框内容到Formik
    onInputChange={(event, newInputValue) => {
      formik.setFieldValue('tagInput', newInputValue);
    }}
    renderTags={(value, getTagProps) =>
      value.map((option, index) => (
        <Chip key={index} label={option} onDelete={() => handleDeleteTag(index)} />
      ))
    }
    renderInput={(params) => (
      <TextField
        {...params}
        label="Tags"
        error={formik.touched.tags && Boolean(formik.errors.tags)}
        helperText={formik.touched.tags && formik.errors.tags}
        onKeyPress={(e) => {
          if (e.key === ' ') {
            // 阻止空格输入到输入框
            e.preventDefault();
            const temp = formik.values.tagInput.trim();
            if (temp) {
              // 添加新标签到tags数组
              formik.setFieldValue('tags', [...(formik.values.tags ?? []), temp]);
              // 清空输入框临时字段
              formik.setFieldValue('tagInput', '');
            }
          }
        }}
      />
    )}
  />
</Grid>

补充说明 #

• 确保Formik的初始值包含tagInput：initialValues={{ tags: [], tagInput: '' }}
• 使用e.preventDefault()避免空格被追加到输入框内容中
• 通过Formik状态更新清空输入框，确保组件渲染时状态一致，不会出现覆盖问题

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