MUI 自动完成选项和 Formik 的 inputValue 不可编辑

问题描述 投票:0回答:0

我正在尝试使用 reactjs、formik 和 MUI 创建一个表单,但是表单中有一个自动完成功能,我无法处理这个问题

当我给出输入值时,它将不可编辑,所以我看不到其他选项或删除或键入任何字母

表单是来自我要更新的父组件的 API 的用户数据

这里是我尝试的例子 我也试过很多方法

有人可以帮忙吗???

            <Autocomplete                  
              name="doctor.speciality"
              options={specialities}
              getOptionLabel={(option) => option.value}
              inputValue={formik.values.doctor?.speciality || ""}
              onChange={(event, newInputValue) => {
                if (newInputValue) {
                  formik.setFieldValue(
                    "doctor.speciality",
                    newInputValue.value
                  );
                } else {
                  formik.setFieldValue("doctor.speciality", "");
                }
              }}
              id={formik.values.doctor.id}
              renderInput={(params) => (
                <TextField
                  {...params}
                  error={
                    formik.touched.doctor?.speciality &&
                    Boolean(formik.errors.doctor?.speciality)
                  }
                  onBlur={() =>
                    formik.setFieldTouched("doctor.speciality", true)
                  }
                  label="Speciality"
                  variant="filled"
                />
              )}
            />
javascript reactjs material-ui formik
© www.soinside.com 2019 - 2024. All rights reserved.