如何在 React Material UI 字段中设置值

Question

我有一个 message 字段需要输入。在此之前，我有可变下拉列表，每次我 select 时都需要将其附加到 message 字段。我的问题是它压倒了它。我在 React 中使用 formik 和 Material-UI。

CODESANDBOX

            <Autocomplete
              value={values.variable}
              options={variables}
              getOptionSelected={(option, value) => option === value}
              getOptionLabel={(data) => data}
              onChange={(e, value) => {
                setFieldValue("variable", value);
                setFieldValue("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)}
                />
              )}
            />

Answer 1

每次 select 某些东西时，您确实会覆盖该值 :)。 如果你想追加，你还需要消息的旧值。

<Autocomplete
                  value={values.variable}
                  options={variables}
                  getOptionSelected={(option, value) => option === value}
                  getOptionLabel={(data) => data}
                  onChange={(e, value) => {
                    setFieldValue("variable", value);
                    // append the 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)}
                    />
                  )}
                />