使用material-ui自动完成获取所选值的“ID”

Question

我正在使用带有 material-ui 的自动完成组件。

1. 搜索栏“customerList”中的数据没有问题。但我无法获得我选择的数据的“ID”号。我要获取选中数据的ID号。

2. 此外，还会出现如下错误。我该如何解决这个问题？

enter image description here

import Autocomplete from '@material-ui/lab/Autocomplete';


class AppointmentFormContainerBasic extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {

    const textEditorProps = (field) => ({
      variant: 'outlined',
      onChange: ({ target: change }) => this.changeAppointment({
        field: [field], changes: change.value
      }),
      value: displayAppointmentData[field] || '',
      className: classes.textField
    });

    const customerList = [
      {id: "1", customerName: 'John', customerSurname: "test0"},
      {id: "2", customerName: 'Bob', customerSurname: "test1"},
      {id: "3", customerNametle: 'steve', customerSurname: "test2"},
      {id: "4", customerName: 'steve', customerSurname: "test3"},
      {id: "4", customerName: 'natalia', customerSurname: "test4"}
    ];

    return (
      <AppointmentForm.Overlay
        visible={visible}
        target={target}
        fullSize
        onHide={onHide}>
        <div>
          <div className={classes.content}>
            <div className={classes.wrapper}>
              <Create className={classes.icon} color="action" />
              <Autocomplete
                id="free-solo-demo"
                freeSolo
                options={customerList.map( (option) => {
                  if (top100Films.customerName === undefined) {
                    console.log("undefined")
                  } else {
                    console.log("option.customerName")
                  }
                  return option.customerName + " " + option.customerSurname;
                })}

                
                defaultValue={displayAppointmentData['customerName']}
                onInputChange={(event, newInputValue) => {
                  this.changeAppointment({
                    field: ['customerName'], changes: newInputValue,
                    value: displayAppointmentData[newInputValue] || '',
                  });
                }}

              />
            </div>

        </div>
      </AppointmentForm.Overlay>
    );
  }
}

Answer 1

编辑 从以下示例中可以看出，onChange 方法的 newValue 参数返回一个对象。

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
      onChange={(event, newValue) => {
        console.log(JSON.stringify(newValue, null, ' '));
      }}
    />
  );
}

const top100Films = [
  { id: 0, title: "The Shawshank Redemption", year: 1994 },
  { id: 1, title: "The Godfather", year: 1972 },
  { id: 2, title: "The Godfather: Part II", year: 1974 },
  { id: 3, title: "The Dark Knight", year: 2008 },
  { id: 4, title: "12 Angry Men", year: 1957 }
];

不幸的是，您的代码只是一个片段，很难确定为什么它在您的情况下不起作用。

Answer 2

在使用freeSolo 和Autocomplete 从对象中进行选择时，我遇到了同样的问题。 onChange 和 onInputChange 都不返回来自 options 的对象，只返回标签。没有freeSolo 也可以。

我通过我的选项来找到匹配的选项。然后我使用 SourceSelect 将其返回给组件。它不漂亮，但它有效。这是我的代码，它是 TypeScript，但“解决方案”也适用于 JavaScript。

import React, {ChangeEvent} from "react";
import {Autocomplete} from "@material-ui/lab";
import {TextField} from "@material-ui/core";

type SourceSelectParams =
    {
     updateSource:(source:Source)=> void
     sourceOptions:Source[]
     preSelected:Source
    }

export default function SourceSelect(props:SourceSelectParams){

        function optionForLabel(label:string):Source{
            let toReturn = props.sourceOptions.find(
                            (source:Source)=>{ return source.name === label}
)
            if(toReturn){
                return toReturn
            }
            return {name:label}
        }

        function update(event:ChangeEvent<{}>, value:Source|string|null) {
            if(value === null){
                return
            }else if( typeof value === 'string'){
                props.updateSource(optionForLabel(value))
            }else{
                props.updateSource( value)
            }
        }


        return(<Autocomplete  options={props.sourceOptions}
                              value={props.preSelected}
                              getOptionLabel={(option) => option.name}
                              onInputChange={update}
                              onChange={update}
                              renderInput={
                                  (params) => <TextField {...params}
                                                                  label="Source"
                                                                  variant="outlined"

                              />}
                              freeSolo
                              autoSelect
                              id={'source'}/>)
}