Question

如何在renderInput中渲染“帐户”组件？我想同时在rederInput和renderOptions上呈现Account组件。

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组件。试试这个沙盒link。

material-ui自动完成中的自定义renderInput

1 个答案: