小编Dyn*_*mic的帖子

具有动态高度的 React Material-Ui 粘性表头

我正在使用 React 的 Material-UI 框架来显示表格。我想使用粘性标题;但是,我不想在我的桌子上设置高度,因为我希望它随着页面滚动。除非我在 TableContainer 上设置高度,否则以下代码段不会粘贴标题。

https://codesandbox.io/s/winter-firefly-5wlx2?file=/src/App.js

import React from "react";
import {
  TableContainer,
  Table,
  TableHead,
  TableRow,
  TableCell
} from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <TableContainer>
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            <TableCell>Value</TableCell>
          </TableRow>
        </TableHead>
        {
          Array(100).fill("Test").map((e) => <TableRow><TableCell>{e}</TableCell></TableRow>)
        }
      </Table>
    </TableContainer>
  );
}
Run Code Online (Sandbox Code Playgroud)

javascript css reactjs material-ui

6
推荐指数
1
解决办法
3992
查看次数

材料表使行在单击时可编辑

使用材料表库,我试图使表行可以通过双击进行编辑。单击该行应该与单击操作列最左侧的编辑按钮具有相同的效果。我已成功链接到正确的事件处理程序,现在双击一行时会出现警报框。

\n\n

https://codesandbox.io/s/lucid-microservice-73iq8?file=/src/App.js:0-1203

\n\n
import React from "react";\nimport MaterialTable, { MTableBodyRow } from "material-table";\n\nexport default function App() {\n  return (\n    <MaterialTable\n      columns={[\n        { title: "Ad\xc4\xb1", field: "name" },\n        { title: "Soyad\xc4\xb1", field: "surname" },\n        { title: "Do\xc4\x9fum Y\xc4\xb1l\xc4\xb1", field: "birthYear", type: "numeric" },\n        {\n          title: "Do\xc4\x9fum Yeri",\n          field: "birthCity",\n          lookup: { 34: "\xc4\xb0stanbul", 63: "\xc5\x9eanl\xc4\xb1urfa" }\n        }\n      ]}\n      components={{\n        Row: props => (\n          <MTableBodyRow\n            {...props}\n            onDoubleClick={() => {\n              alert("Make row editable");\n            }}\n          />\n        )\n      }}\n      editable={{\n        onRowAdd: newData …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs material-ui material-table

4
推荐指数
1
解决办法
6869
查看次数

React Native 导航将所有屏幕包裹在一个视图中

使用react-navigation v5,如何将所有屏幕单独包装在滚动视图和键盘安全视图中?

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Test" component={TestScreen} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}
Run Code Online (Sandbox Code Playgroud)

javascript react-native react-navigation react-navigation-v5

4
推荐指数
1
解决办法
4129
查看次数