Material UI react自动完成设置不同的标签和不同的值答案

【问题标题】：Material UI react autocomplete set different label and different valueMaterial UI react自动完成设置不同的标签和不同的值
【发布时间】：2020-08-16 03:23:12
【问题描述】：

我们可以在https://material-ui.com/components/autocomplete/看到这个例子

我想设置不同的选项标签和值。

这里是使用的例子

    const defaultProps = {
       options: top5Films,
       getOptionLabel: (option) => option.title,
    };

    <Autocomplete
      {...defaultProps}
      id="auto-complete"
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      autoComplete
      includeInputInList
      renderInput={(params) => <TextField {...params} label="clearOnEscape" margin="normal"/>}
    />
    const top5Films= [
    { title: 'The Shawshank Redemption', year: 1994 },
    { title: 'The Godfather', year: 1972 },
    { title: 'The Godfather: Part II', year: 1974 },
    { title: 'The Dark Knight', year: 2008 },
    { title: '12 Angry Men', year: 1957 }
    ]

但我有如下数据：

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

我想将 id 设置为值并将标题显示为标签。

【问题讨论】：

那么当你开始打字时会发生什么？

标签： javascript reactjs autocomplete material-ui

【解决方案1】：

看起来对象被赋值了。

因此将 id 设置为 value 会使选项崩溃。

我以下列方式使用对象中的 id 进行进一步操作。

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function Playground() {
  const [value, setValue] = React.useState(null);
  const [id, setId] = React.useState(null);
  const [title, setTitle] = React.useState(null);

  return (
    <div>
      <div>{`value: ${value}`}</div>
      <div>{`id: ${id}`}</div>
      <div>{`title: ${title}`}</div>

      <br />
      <div style={{ width: 300 }}>
        <Autocomplete
          options={top5Films}
          getOptionLabel={option => option.title}
          id="movies"
          value={value}
          onChange={(event, newValue) => {
            console.log(newValue);
            if (newValue) {
              setValue(newValue);
              setId(newValue.id);
              setTitle(newValue.title);
            }
          }}
          renderInput={params => (
            <TextField {...params} label="Movies" margin="normal" />
          )}
        />
      </div>
    </div>
  );
}

// Top 5 films as rated by IMDb users. http://www.imdb.com/chart/top
const top5Films = [
  { id: 1, title: "The Shawshank Redemption", year: 1994 },
  { id: 2, title: "The Godfather", year: 1972 },
  { id: 3, title: "The Godfather: Part II", year: 1974 },
  { id: 4, title: "The Dark Knight", year: 2008 },
  { id: 5, title: "12 Angry Men", year: 1957 }
];

这暂时有效，但始终欢迎最佳答案。

【讨论】：

感谢您的回答，但我没有找到我发布的内容的变化。看起来该值是对象并且不能将其设置为 id 因为这会使选项崩溃。也许我需要稍后在发送到后端之前从对象中获取 id。
这是我正在玩的沙盒：codesandbox.io/s/material-demo-x02jd?file=/demo.js
@yathomasi 有什么问题？
我想将 id 发送到后端，但值是一个对象
@yathomasi 见codesandbox.io/s/…

【解决方案2】：

我无法完全理解您的问题，但我猜您希望 getOptionLabel 有不同的显示选项，并在下拉列表中显示不同的显示。如果是这种情况，您可以简单地使用 Material UI 提供的 renderOption。在此处查看示例：https://codesandbox.io/s/94xlp?file=/demo.js

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

  return (
   <Autocomplete
                            freeSolo
                            name=""
                            options={top5Films }
                            getOptionLabel={(option) => option.title} //Displays title only in input field
                            renderOption={(option) => (
                              <React.Fragment>
                                {option.title + "," + " " + option.year}  //Displays title + year in dropdown list
                              </React.Fragment>
                            )}
                            renderInput={params => (
                              <Field
                                component={FormikTextField}
                                {...params}
                                label=""
                                name=""
                              />
                            )}
                          />
  );
}

【讨论】：

【解决方案3】：

试试这个，设置一个json值并使用inputValue的名称，输入值不改变为什么不调用onChange函数

<Autocomplete
  options={machineList}
  inputValue={formValues.machine.name || ""} // from formik context in my case
  onChange={(e, value) => {
    setValues(
      "machine",
      value && value.id ? { id: value.id, name: value.name } : ""  //use json value
    );
  }}
  getOptionLabel={(option) => option.name}
  renderInput={(params) => (
    <InputField
      {...params}
      type="text"
      name={machine.name}
      label={machine.label}
      fullWidth
    />
  )}
/>;

【讨论】：