Material-UI 自动完成仅存储对象的单个 属性

Question

我正在尝试使用 自动完成 但我需要让值只存储一个特定的 属性 而不是一个完整的对象。

例如 本例是属性Value，但也可以是任意的

const options = [
  { Value: 1, label: "Option 1", anyOtherProp: 123 },
  { Value: 2, label: "Option 2", anyOtherProp: 456 },
  { Value: 3, label: "Option 3", anyOtherProp: 789 }
];

export default function App() {
  const [value, setValue] = useState(null);

  const valueKey = "Value"; // this should be any key

  const handleChange = (e, value) => {
    // what to do here?
    setValue(value[valueKey]);
  };    

  return (
    <div className="App">
      <Autocomplete
        options={options}
        onChange={handleChange}
        value={value}
        getOptionLabel={option => option.label}
        renderInput={props => <TextField {...props} fullWidth />}
      />
    </div>
  );
}

当我执行此操作时，输入为空且不显示任何内容。

我需要的值只是对象的一个​​ 属性 而不是完整选项的对象。

这是显示问题的 codesandbox。

Answer 1

检查 value 并调用 setValue。也将 CustomAutocomplete 上的 value props 替换为 defaultValue，一切都会正常工作。 检查 fiddle Fiddle Link

export default function App() {
  const [value, setValue] = useState(null);

  const valueKey = "Value"; // this should be any key

  const handleChange = (e, value) => {
    // what to do here?
    if(value) setValue(value[valueKey]);
  };

  return (
    <div className="App">
      <CustomAutocomplete
        onChange={handleChange}
        defaultValue={value}
        options={options}
      />
    </div>
  );
}