Javascript 物料界面反应自动完成设置不同标签和不同值

我们可以在下面的

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

下面是一个例子

const defaultProps={
选项：TOP5电影，
getOptionLabel:（option）=>option.title，
};
{
设置值（新值）；
}}
自动完成
includeInputList
renderInput={（参数）=>}
/>
常数TOP5胶片=[
{标题：《肖申克的救赎》，年份：1994}，
{标题：'教父'，年份：1972}，
{标题：《教父：第二部分》，年份：1974}，
{标题：《黑暗骑士》，2008年}，
{标题：“12个愤怒的男人”，年份：1957}
]

但我有如下数据：

const top5Films=[
{id:1，标题：《肖申克的救赎》，年份：1994}，
{id:2，标题：'教父'，年份：1972}，
{id:3，标题：'教父：第二部分'，年份：1974}，
{id:4，标题：'黑暗骑士'，年份：2008}，
{id:5，标题：“12个愤怒的男人”，年份：1957}
]

---

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

看起来对象已分配给该值

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

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

/*eslint在定义前禁用no use*/
从“React”导入React；
从“@material ui/core/TextField”导入TextField；
从“@material ui/lab/Autocomplete”导入自动完成；
导出默认函数（）{
const[value，setValue]=React.useState（null）；
const[id，setId]=React.useState（null）；
const[title，setTitle]=React.useState（null）；
返回(
{`value:${value}`}
{`id:${id}`}
{`title:${title}`}


选项.title}
id=“电影”
value={value}
onChange={（事件，newValue）=>{
console.log（newValue）；
如果（新值）{
设置值（新值）；
setId（newValue.id）；
setTitle（newValue.title）；
}
}}
renderInput={params=>(
)}
/>
);
}
//IMDb用户评价的前5部电影。http://www.imdb.com/chart/top
常数TOP5胶片=[
{id:1，标题：“肖申克的救赎”，年份：1994}，
{id:2，标题：“教父”，年份：1972}，
{id:3，标题：“教父：第二部分”，年份：1974}，
{id:4，标题：“黑暗骑士”，年份：2008}，
{id:5，标题：“12个愤怒的人”，年份：1957}
];

---

这暂时有效，但最好的答案总是受欢迎的。

我无法完全理解您的问题，但我想您希望getOptionLabel具有不同的显示选项，并在下拉列表中具有不同的显示。如果是这种情况，您可以简单地使用材质UI提供的渲染。请在此查看一个示例：

从“React”导入React；
从“@material ui/core”导入{TextField}”；
从“@material ui/lab”导入{Autocomplete}”；
返回(
option.title}//仅在输入字段中显示标题
渲染={（选项）=>(
{option.title+“，“+”+option.year}//在下拉列表中显示title+年份
)}
renderInput={params=>(
)}
/>
);
}

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

{
设定值(
“机器”，
value&&value.id？{id:value.id，name:value.name}://使用json值
);
}}
getOptionLabel={（option）=>option.name}
renderInput={（参数）=>(
)}
/>;那么当你开始打字时发生了什么？谢谢你的回答，但是我没有发现我发布的内容有什么变化。看起来该值就是对象，无法将其设置为id，因为这将使选项崩溃。在发送到后端之前，我可能需要从对象获取id。这是我正在玩的沙盒：@yathomasi有什么问题吗？我想将id发送到后端，但值为object@yathomasi看见
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=""
                              />
                            )}
                          />
  );
}