reactjs - 将 Material-ui 下拉列表绑定(bind)到表格

Question

如何将 React Material-ui 下拉列表绑定(bind)到表格？我有一个包含国家/地区的下拉菜单，以及一个包含国家/地区和首都的表格。根据所选国家/地区，表格应仅显示该国家/地区和首都。 下面是我的代码。 第一个问题是，下拉列表值未正确更新。第二个问题是，当下拉列表值更改时，表格不会更新。

import React from "react";
import logo from "./logo.svg";
import "./App.css";

import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";

import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(1)
  },
  input: {
    display: "none"
  }
}));

function App() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    country: "",
    rows: [
      createData("US", "DC"),
      createData("UK", "London"),
      createData("Aus", "Canberra")
    ]
  });

  function handleChange(event) {
    setValues(oldValues => ({
      ...oldValues,
      [event.target.name]: event.target.value
    }));
  }

  function createData(country, capital) {
    return { country, capital };
  }
  var rows = [
    createData("US", "DC"),
    createData("UK", "London"),
    createData("Aus", "Canberra")
  ];

  return (
    <div className="App">
      <label value="Select Country: ">Select Country: </label>
      <Select
        style={{ width: "10%" }}
        value={values.country}
        onChange={handleChange}
        name="country"
        displayEmpty
        className={classes.selectEmpty}>
        <MenuItem value="">Country</MenuItem>
        <MenuItem>US</MenuItem>
        <MenuItem>UK</MenuItem>
        <MenuItem>Aus</MenuItem>
      </Select>

      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell align="center">Country</TableCell>
            <TableCell align="center">Capital city</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {values.rows.map(row => (
            <TableRow key={row.name}>
              <TableCell align="center">{row.country}</TableCell>
              <TableCell align="center">{row.capital}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

export default App;

Answer 1

您需要进行一些小的更改...

• 为 MenuItem 添加 value 属性
• 添加使用所选 MenuItem 值进行过滤的功能
• (这是个人偏好)但我发现将状态分离到自己的对象中更容易 - 我相信 React 也可能推荐这，但必须查看文档...

现场演示:

代码:

let API_DATA = [
  { country: "US", capital: "DC" },
  { country: "UK", capital: "London" },
  { country: "Aus", capital: "Canberra" }
];

function App() {
  const classes = useStyles();
  const [tableData, setTableData] = React.useState(API_DATA);
  const [selected, setSelected] = React.useState("");

  function handleChange(event) {
    setSelected(event.target.value);
    let _vals = event.target.value
      ? API_DATA.filter(r => r.country === event.target.value)
      : API_DATA;
    setTableData(_vals);
  }

  return (
    <div className="App">
      <label value="Select Country: ">Select Country: </label>
      <Select
        style={{ width: "30%" }}
        value={selected}
        onChange={handleChange}
        name="country"
        displayEmpty
        className={classes.selectEmpty}
      >
        <MenuItem value="">All Countries</MenuItem>
        <MenuItem value="US">US</MenuItem>
        <MenuItem value="UK">UK</MenuItem>
        <MenuItem value="Aus">Aus</MenuItem>
      </Select>

      <Table className={classes.table}>
        <TableHead>
          <TableRow>
            <TableCell align="center">Country</TableCell>
            <TableCell align="center">Capital city</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {tableData.map(row => (
            <TableRow key={row.name}>
              <TableCell align="center">{row.country}</TableCell>
              <TableCell align="center">{row.capital}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}