如何在React Material UI+Formik场景下实现下拉值追加到输入框而非覆盖

问题出在你当前的Autocomplete onChange回调逻辑里，直接把message字段赋值为下拉选中值，自然会覆盖原有内容，只需要调整赋值逻辑，先读取已有message内容再做拼接即可。

修改后的代码如下：

<Autocomplete
  value={values.variable}
  options={variables}
  getOptionSelected={(option, value) => option === value}
  getOptionLabel={(data) => data}
  onChange={(e, value) => {
    setFieldValue("variable", value);
    // 原有内容在前，新选中值在后，中间用空格分隔，不需要分隔可以去掉空格
    setFieldValue("message", `${values.message || ''}${value}`);
  }}
  fullWidth
  renderInput={(params) => (
    <TextField
      {...params}
      name="variable"
      size="small"
      variant="outlined"
      onBlur={handleBlur}
      helperText={touched.variable ? errors.variable : ""}
      error={touched.variable && Boolean(errors.variable)}
    />
  )}
/>

可选优化 #

• 上面代码中加了|| ''兼容逻辑，可以避免初始message为undefined时拼接出undefinedxxx的异常内容
• 如果希望选中变量后下拉框自动清空，方便连续追加多个变量，可以在onChange回调末尾添加setFieldValue("variable", "")
• 如果需要用其他符号（比如换行、逗号、花括号）包裹追加的变量，直接修改拼接逻辑即可，比如要包裹成变量模板格式就改成${values.message || ''}{${value}}

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