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

问题描述

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

搜索栏“customerList”中的数据没有问题。但我无法获得我选择的数据的“ID”号。我想获取所选数据的 ID 号。
此外，还会出现如下错误。我怎样才能解决这个问题？

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>
    );
  }
}

标签： javascriptreactjsautocompletematerial-ui

编辑从以下示例中可以看出，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 }
];

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

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

问题描述

解决方案

推荐阅读