文本字段一种类型和停止梅料

Question

所以我有Texfield从材质UI，但我注意到一件事，每次我键入，我停止，而不是继续下一个字母，所以我必须再次点击它…，但是当我删除onChange方法时，数据继续输入而不停止…，是否因为useEffect组件阻止它连续输入?

下面是我的代码:

import React from "react";
import { Search } from "@mui/icons-material";
import { IconButton, TextField, InputAdornment } from "@mui/material";
import {
GridToolbarDensitySelector,
GridToolbarContainer,
GridToolbarExport,
GridToolbarColumnsButton,
} from "@mui/x-data-grid";
import FlexBetween from "./FlexBetween";
const DataGridCustomToolbar = ({ searchInput, setSearchInput, setSearch }) => {
return (
<GridToolbarContainer>
<FlexBetween width="100%">
<FlexBetween>
<GridToolbarColumnsButton />
{/* <GridToolbarDensitySelector /> */}
<GridToolbarExport />
</FlexBetween>
<TextField
label="Search..."
sx={{ mb: "0.5rem", width: "15rem" }}
onChange={(e) => setSearchInput(e.target.value)}
value={searchInput}
variant="standard"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => {
setSearch({ value: searchInput });
setSearchInput("");
}}
>
<Search />
</IconButton>
</InputAdornment>
),
}}
/>
</FlexBetween>
</GridToolbarContainer>
);
};
export default DataGridCustomToolbar;
Here is what its being use on the datagrid
const BOM = () => {
const theme = useTheme();
// values to be sent to the backend
const [page, setPage] = useState(0);
const [limit, setlimit] = useState(20);
const [order, setOrder] = useState([
{
column: "1",
dir: "asc",
},
]);
const [search, setSearch] = useState({
value: "",
});
const [data, setData] = useState([]);
const [total, setTotal] = useState(0);
const setDataInput = (value) => {
setDataInput(value);
};
useEffect(() => {
dataService.getBomList(page, limit, order, search).then((response) => {
console.log("BOM");
setData(response.data.data.data);
setTotal(response.data.data.recordsFiltered);
return response.data.data.data;
});
}, [page, limit, order]);
console.log(data);
const [searchInput, setSearchInput] = useState("");
const columns = [
{
field: "sku",
headerName: "SKU",
width: 100,
},
{ field: "sku_name", headerName: "SKU NAME", width: 300 },
{
field: "plant",
headerName: "Plant",
width: 80,
align: "center",
headerAlign: "center",
},
{ field: "base_qty", headerName: "Base QTY", width: 100 },
{
field: "item",
headerName: "Item",
width: 60,
align: "center",
headerAlign: "center",
},
{ field: "uom_sku", headerName: "UOM SKU", width: 100, align: "center" },
{ field: "material", headerName: "Material", width: 150 },
{ field: "material_name", headerName: "Material Name", width: 300 },
{ field: "qty_material", headerName: "Material QTY", width: 100 },
{ field: "uom_material", headerName: "Material UOM", width: 100 },
{ field: "alt_bom", headerName: "BOM ALT", width: 80 },
{ field: "valid_from", headerName: "Valid From", width: 210 },
{ field: "valid_to", headerName: "Valid to", width: 210 },
{ field: "status", headerName: "Status", width: 80 },
];

return (
<Box m="5px">
<Box height="80vh">
{console.log("data", order, page, limit, search, searchInput)}
<StripedDataGrid
// loading={isLoading || !data}
getRowId={(row) => row.id}
columns={columns}
rowCount={(limit && total) || 0}
rowsPerPageOptions={[20, 50, 100]}
rows={data || []}
pagination
paginationMode="server"
sortingMode="server"
page={page}
pageSize={limit}
onPageSizeChange={(newPageSize) => setlimit(newPageSize)}
onPageChange={(newPage) => setPage(newPage)}
onSortModelChange={(newSortModel) => setOrder(...newSortModel)}
components={{ Toolbar: DataGridCustomToolbar }}
componentsProps={{
toolbar: { searchInput, setSearchInput, setSearch },
}}
/>
</Box>
</Box>
);
};
export default BOM;

谁能告诉我我在哪里做错了....

Answer 1

import React from "react";
import { Search } from "@mui/icons-material";
import { IconButton, TextField, InputAdornment } from "@mui/material";
import {
GridToolbarDensitySelector,
GridToolbarContainer,
GridToolbarExport,
GridToolbarColumnsButton,
} from "@mui/x-data-grid";
import FlexBetween from "./FlexBetween";
const DataGridCustomToolbar = ({ searchInput, onChange }) => {
const handleChange = event => {
const text = event.target.value;
onChange(text);
};
return (
<GridToolbarContainer>
<FlexBetween width="100%">
<FlexBetween>
<GridToolbarColumnsButton />
{/* <GridToolbarDensitySelector /> */}
<GridToolbarExport />
</FlexBetween>
<TextField
label="Search..."
sx={{ mb: "0.5rem", width: "15rem" }}
onChange={handleChange}
value={searchInput}
variant="standard"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
onClick={() => {

onChange("");
}}
>
<Search />
</IconButton>
</InputAdornment>
),
}}
/>
</FlexBetween>
</GridToolbarContainer>
);
};
export default DataGridCustomToolbar;

类似的

const BOM = () => {
const theme = useTheme();
// values to be sent to the backend
const [page, setPage] = useState(0);
const [limit, setlimit] = useState(20);
const [order, setOrder] = useState([
{
column: "1",
dir: "asc",
},
]);
const [search, setSearch] = useState({
value: "",
});
const [data, setData] = useState([]);
const [total, setTotal] = useState(0);
const [searchInput, setSearchInput] = useState({ Text: "" });
const setDataInput = (value) => {
setDataInput(value);
};
const handleFieldChange = (value) => {
if (value === "") {
setSearch({ value: searchInput });
}
setSearchInput({ Text: value });
};
useEffect(() => {
dataService.getBomList(page, limit, order, search).then((response) => {
console.log("BOM");
setData(response.data.data.data);
setTotal(response.data.data.recordsFiltered);
return response.data.data.data;
});
}, [page, limit, order]);
console.log(data);

const columns = [
{
field: "sku",
headerName: "SKU",
width: 100,
},
{ field: "sku_name", headerName: "SKU NAME", width: 300 },
{
field: "plant",
headerName: "Plant",
width: 80,
align: "center",
headerAlign: "center",
},
{ field: "base_qty", headerName: "Base QTY", width: 100 },
{
field: "item",
headerName: "Item",
width: 60,
align: "center",
headerAlign: "center",
},
{ field: "uom_sku", headerName: "UOM SKU", width: 100, align: "center" },
{ field: "material", headerName: "Material", width: 150 },
{ field: "material_name", headerName: "Material Name", width: 300 },
{ field: "qty_material", headerName: "Material QTY", width: 100 },
{ field: "uom_material", headerName: "Material UOM", width: 100 },
{ field: "alt_bom", headerName: "BOM ALT", width: 80 },
{ field: "valid_from", headerName: "Valid From", width: 210 },
{ field: "valid_to", headerName: "Valid to", width: 210 },
{ field: "status", headerName: "Status", width: 80 },
];
return (
<Box m="5px">
<Box height="80vh">
{console.log("data", order, page, limit, search, searchInput)}
<StripedDataGrid
// loading={isLoading || !data}
getRowId={(row) => row.id}
columns={columns}
rowCount={(limit && total) || 0}
rowsPerPageOptions={[20, 50, 100]}
rows={data || []}
pagination
paginationMode="server"
sortingMode="server"
page={page}
pageSize={limit}
onPageSizeChange={(newPageSize) => setlimit(newPageSize)}
onPageChange={(newPage) => setPage(newPage)}
onSortModelChange={(newSortModel) => setOrder(...newSortModel)}
components={{ Toolbar: DataGridCustomToolbar }}
componentsProps={{
toolbar: { searchInput, handleFieldChange },
}}
/>
</Box>
</Box>
);
};
export default BOM;