動態更改 Mui 自動完成值選擇

Question

我使用 Mui AutoComplete 作為 select 選項來創建 Formik 表單。

<Autocomplete
  disablePortal
  options={vendors}
  getOptionLabel={(option) => option.vendor_company}
  onChange={(e, value) => {setFieldValue("vendor_id", value.id); }}
  renderInput={(params) => (
      <TextField
      error={Boolean(touched.vendor_id && errors.vendor_id)}
      helperText={touched.vendor_id && errors.vendor_id}
      onBlur={handleBlur}
      //onChange={handleChange}
      fullWidth
      {...params}
      label={t('Vendor')}
      />
  )}
/>

以下JSON數據從服務器拉取返回，

vendor_id : 1

對於添加新的數據選擇值，這非常有效。

但是如何根據編輯模式更改字段值呢？ 意味着我正在從服務器獲取數據，我需要以自動完成值顯示服務器數據，

謝謝，

Answer 1

您可以使用 state 並使用服務器中的數據設置他，並將您想要顯示的值放在自動完成的屬性值上。

如果我想念你遇到的麻煩，請告訴我，我可以再次編輯。

Answer 2

利用 AutoComplete 組件的 'value' 屬性，並將要在編輯模式下顯示的值作為選項的 object 傳遞，這是一個小示例

建興興業

import { useState } from "react";
import { Autocomplete, TextField } from "@mui/material";

const options = [
  { label: "The Godfather", id: 1 },
  { label: "Pulp Fiction", id: 2 },
];
const App = ({ editMode = true }) => {
  const [fieldValue, setFieldValue] = useState(editMode ? options[1] : null);
  return (
    <div className="App">
      <Autocomplete
        disablePortal
        options={options}
        onChange={(e, value) => {
          console.log(value);
          setFieldValue(value);
        }}
        value={fieldValue}
        renderInput={(params) => (
          <TextField
            onChange={(e) => setFieldValue(e.target.value)}
            label="Hello"
            {...params}
          />
        )}
      />
    </div>
  );
};
export default App;