设置DefaultValue时，MUI选择不更改值

Question

我有一个来自MUI反应性的含义。 我还与控制器使用反应钩形式。 在控制器中，我将设置DefaultValue，因为我想使用RESET函数von React-Hook-form。但是，当我设置默认值时，我无法更改值。如果没有默认值，则可以按预期效果。 这是我的代码：

import * as React from "react";
import { useTheme } from "@mui/material/styles";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { useFormContext, Controller } from "react-hook-form";
import Box from '@mui/material/Box';
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
  PaperProps: {
    style: {
      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
      width: 250,
    },
  },
};

function getStyles(name, personName, theme) {
  return {
    fontWeight:
      personName.indexOf(name) === -1
        ? theme.typography.fontWeightRegular
        : theme.typography.fontWeightMedium,
  };
}

function MySelect({ formname, name, reset, setSelected, data = [] }) {
  const {
    control,
    formState: { errors },
    setValue,
  } = useFormContext();

  let isError = false;
  let errorMessage = "";
  if (errors && errors.hasOwnProperty(name)) {
    isError = true;
    errorMessage = errors[name].message;
  }

  const handleChange = (event) => {
    const {
      target: { value },
    } = event;
    setSelected(
      // On autofill we get a stringified value.
      typeof value === "string" ? value.split(",") : value
    );
  };


  return (
    <Box sx={{minWidth: 120}}>
      <InputLabel id="demo-multiple-name-label">{name}</InputLabel>
      <Controller
        name={formname}
        style={{ width: 200 }}
        control={control}
        defaultValue=""
        render={({ field: { onChange, value } }) => (
          <Select
            sx={{ width: 200 }}
            labelId="demo-multiple-name-label"
            id="demo-multiple-name"
            multiple={false}
            value={value}
            onChange={onChange}
            input={<OutlinedInput label={name} />}
            MenuProps={MenuProps}
            error={isError}
            helperText={errorMessage}
          >
            {data.map((element, i) => {
              if (element.bsa_maskenkey)
                return (
                  <MenuItem value={element} key={i}>
                    {`${element.bsa_maskenkey} ${element.we_menge}`}
                  </MenuItem>
                );
              else if (element.blager_maskenkey)
                return (
                  <MenuItem value={element} key={i}>
                    {`${element.blager_maskenkey} ${element.blagerpo_maskenkey} | Menge: ${element.summe}`}
                  </MenuItem>
                );
              else
                return (
                  <MenuItem value={element} key={i}>
                    {`${element.objekt} | Menge: ${element.menge}`}
                  </MenuItem>
                );
            })}
          </Select>
        )}
      />
    </Box>
  );
}
export default React.memo(MySelect)


```

Answer 1

输入元素必须受到控制或不受控制（指定值Prop或DefaultValue Prop，但不能同时进行）。您应该在使用受控或不受控制的输入元素之间做出决定，并删除其中一种道具。我认为您需要受控的输入，因为您可能以表格的某种状态保持输入值。
在useform挂钩中声明defaultValues应该足够，并且这些挂钩将自动绑定到其内部形式的相关输入字段。例如：

useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: { FieldA: "foo", FieldB: "xai" },
  shouldFocusError: true,
  shouldUnregister: false,
  shouldUseNativeValidation: false
})

当这样使用时，fielda和fieldb的默认值将在其相关字段中自动设置为在其内部形式的初始值中，您只需要确保您正在适当地使用相关形式状态绑定这些字段。