Material ui将TextField功能替换为自动完成

Question

下面是一个简单的代码示例。有一个国家的列表，我正在映射它，并在TextField组件中显示选项，以便用户可以选择。TextField很棒，但它缺少搜索功能，所以我决定切换到自动完成。但当涉及到受控制的自动完成组件时，会出现一些问题。我将使用TextField附加代码，然后使用Autocomplete。

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
const App = () => {
const [branch, setBranch] = useState("us");
const countries = [
{ id: 1, name: "United States", iso_a2: "us" },
{ id: 2, name: "France", iso_a2: "fr" },
{ id: 3, name: "Brasil", iso_a2: "br" }
];
return (
<TextField
helperText="Branch"
onChange={(e) => setBranch(e.target.value)}
select
value={branch}
variant="outlined"
>
{countries.map(({ id, name, iso_a2 }) => (
<MenuItem key={id} value={iso_a2}>
{name}
</MenuItem>
))}
</TextField>
);
};
export default App;

这是一个可以很好地使用TextField的代码。我试着按照文档中描述的那样做，但每次控制台都会出错。有人面临同样的问题吗？如果是，或者如果你能解决问题，请帮助：(

Answer 1

您似乎在混淆Autocomplete和Textfield组件之间的字符串和对象。我已经分叉了你的代码沙盒(并删除了Textfield部分以防止错误(，向你展示了一个基于你的代码的工作示例。

https://codesandbox.io/s/sad-stallman-syjs9?file=/src/App.js