使用 react-hook-form (Material-UI) 更改自動完成值

Question

我有兩個自動完成字段，我的目標是通過第一個字段的值更改第二個字段的值。

我面臨的問題是，當我嘗試將新值發送到“setValue”function 時，state 表單沒有發生任何變化，但自動完成字段顯示舊值。 在這個沙盒中： https://codesandbox.io/s/dazzling-carson-84dxp?file=/src/Form/Components/UserCountry.js

你可以看到我的實現。

Answer 1

如果您在更改user_name字段時查看控制台，您可以在控制台中看到 materialUI 警告，其中顯示：

Material-UI：一個組件正在將 Autocomplete 的不受控值 state 更改為受控。

原因是您的user_country的默認值是undefined的，並且 material 將此字段視為不受控制的字段，這意味着 material 將控制user_country值。 要解決該問題，您有兩種解決方案：

1-通過defaultValues選項定義您的表單，如下所示：

const methods = useForm({
  defaultValues: {
    user_name: null,
    user_country: null
  }
});

2- 當null作為值發送到AutoComplete時，它沒有任何值，如下所示：

<Controller
  control={control}
  name={`user_country`}
  render={({ field: { onChange, value } }) => (
    <Autocomplete
      id="country-select-demo"
      options={countries}
      onChange={(event, item) => {
        onChange(item);
      }}
      value={value || null}
      ...
    />
  )}
/>

在這里，您可以看到每當您更改user_name字段時更新user_country的表單。