Пользовательский renderInput в автозаполнении материала-интерфейса

Question

Как я могу визуализировать мой компонент Account в renderInput? Я хочу отобразить компонент Account как для rederInput, так и для renderOptions.

demo. js

/* eslint-disable no-use-before-define */
import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { Card, CardContent, Typography, Grid } from "@material-ui/core";

const accounts = [
  {
    accountNo: "000223187413",
    accountName: "Sample1",
    money: 1231.32
  },
  {
    accountNo: "000123187412",
    accounttName: "Sample2",
    money: 10000.0
  }
];
function Account({ account }) {
  return (
    <Card style={{ width: "100%" }}>
      <CardContent>
        <Typography>{account.accountName}</Typography>
        <Typography variant="h6" component="h2">
          {account.accountNo}
        </Typography>
        <Grid container justify="flex-end">
          <Typography variant="body1" align="right">
            &#8369;{" "}
            {new Intl.NumberFormat("en-US", {
              minimumFractionDigits: 2
            }).format(account.money)}
          </Typography>
        </Grid>
      </CardContent>
    </Card>
  );
}
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={accounts}
      getOptionLabel={(option) => option.accountNo}
      style={{ width: 300 }}
      renderInput={(account) => <Account account={account} />}
      renderOption={(account) => <Account account={account} />}
    />
  );
}

CodeSandBox: https://codesandbox.io/s/material-demo-v3sul?file= / demo. js

Answer 1

Вам не нужно использовать компонент account в renderInput. Попробуйте эту песочницу ссылка .