Material ui 用自动完成替换 TextField 功能答案

【问题标题】：Material ui replace TextField functionality with autocompleteMaterial ui 用自动完成替换 TextField 功能
【发布时间】：2021-03-18 23:42:17
【问题描述】：

这是一个简单的代码示例。有一个国家列表，我将其映射并显示 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 配合使用的代码。我尝试按照文档中的描述进行操作，但每次都在控制台中出现错误。有没有人遇到过同样的问题？如果是，或者如果你能解决它，请帮忙:)

【问题讨论】：

您没有向我们展示您的 Autocomplete 代码，也没有告诉我们您遇到了什么错误。
codesandbox.io/s/laughing-pare-157l5?file=/src/App.js 这是一段代码，我不能在这里包含我所有的项目，它非常庞大，有很多文件。当我尝试将所选数据发送到后端时发生错误。我的问题是，如果其他人对 Material UI 中的这个组件有疑问。

标签： reactjs autocomplete material-ui textfield

【解决方案1】：

您似乎将Autocomplete 和Textfield 组件之间的字符串和对象混为一谈。我已经分叉了您的代码框（并删除了 Textfield 部分以防止错误），以便根据您的代码向您展示一个工作示例。

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

【讨论】：

非常感谢，我会尝试在我的代码中使用它，如果它有效，我会告诉你:) 我只是让文本字段在这里，这样你就可以并排看到它们。