React Form Hook with Autocomplete Material UI

Question

我有一個包含id和name的countries地區數組。 目前我正在使用 Material UI Autocomplete元素，並且我有一個反應鈎子表單。 當我提交表單時，我想獲取國家 ID。 目前它正在發布國家名稱。 有沒有辦法發布 id 而不是名稱，而無需從名稱中獲取 id。

   <Autocomplete
      className="form-item"
      options={countries}
      getOptionLabel={option => option.name}
      renderInput={params => (
        <TextField
          {...params}
          inputRef={register}
          label="Country"
          name="country"
          placeholder="Select a Country"
          InputLabelProps={{
            shrink: true
          }}
          variant="outlined"
        />
      )}
    />

Answer 1

使用 react-hook-form 的Controller並將整個Autocomplete放在as屬性中。 這樣，當您提交表單時，您將獲得所選選項的整個 object。

注意：在 react-hook-form 版本 6.x 中， onChange被刪除， as 道具將采用 function 並且您可以獲得onChange作為參數。

工作演示 - v6

    <Controller
        as={({ onChange }) => (
          <Autocomplete
            className="form-item"
            options={countries}
            onChange={(_, data) => onChange(data)}
            getOptionLabel={option => option.label}
            renderInput={params => (
              <TextField
                {...params}
                label="Country"
                placeholder="Select a Country"
                InputLabelProps={{
                  shrink: true
                }}
                variant="outlined"
              />
            )}
          />
        )}
        name="country"
        control={control}
        defaultValue={{ label: "The Shawshank Redemption", id: "1994" }}
      />

注意：如果您使用的是 v5x，請參閱下面的演示和代碼片段。

工作演示 - v5

   <Controller
        as={
          <Autocomplete
            className="form-item"
            options={countries}
            getOptionLabel={option => option.label}
            renderInput={params => (
              <TextField
                {...params}
                label="Country"
                placeholder="Select a Country"
                InputLabelProps={{
                  shrink: true
                }}
                variant="outlined"
              />
            )}
          />
        }
        name="country"
        control={control}
        onChange={([, data]) => data}
        defaultValue={{ label: "The Shawshank Redemption", id: "1994" }}
      />

編輯：基於評論您可以使用setValue根據 api 設置默認值。

代碼片段：

useEffect(() => {
    setTimeout(() => { // fake api
      setValue(
        "country",
        { label: "hi The Godfather", id: "1972" },
        { shouldDirty: true }
      );
    }, 2000);
  }, []);

上面的演示 v6 已更新。

也可以在這里查看 setValue 使用的官方演示

Answer 2

這是創建它的最簡單方法，從反應鈎子中渲染 Controller 中的Autocomplete組件，使用render function 中的onChange和value來控制值

<Controller
control={control}
name="type"
rules={{
  required: 'Veuillez choisir une réponse',
}}
render={({ field: { onChange, value } }) => (
  <Autocomplete
    freeSolo
    options={['field', 'select', 'multiple', 'date']}
    onChange={(event, values) => onChange(values)}
    value={value}
    renderInput={(params) => (
      <TextField
        {...params}
        label="type"
        variant="outlined"
        onChange={onChange}
      />
    )}
  />
)}

Answer 3

恐怕沒有一種“簡單”的方法可以通過當前設置獲取 ID。

但是，您可以掛鈎Autocomplete#onChange事件並使用value屬性來接管 Autocomplete 組件的內部值 state。 這導致在您的組件中具有可用的價值，並利用它來發揮您的優勢。

在下面的示例中，id 將在表單數據中作為country-id可用。

function CountryAutocomplete() {
  const [value, setValue] = useState(); // `[]` for multiple

  return (
    <React.Fragment>
      <Autocomplete
        className="form-item"
        value={value}
        onChange={(event, value) => setValue(value)}
        options={countries}
        getOptionLabel={option => option.name}
        renderInput={params => (
          <TextField
            {...params}
            inputRef={register}
            label="Country"
            name="country"
            placeholder="Select a Country"
            InputLabelProps={{
              shrink: true
            }}
            variant="outlined"
          />
        )}
      />
      <input value={value?.id} name="country-id" />
    </React.Fragment>
  );
}