在 Material-Table 中点击按钮
Onclick with Button in Material-Table
你好!你能帮我看看如何点击按钮=>它会变成其他组件(检查细节)当我点击按钮xet duyet。但是
不显示 Checkdetail 的内容。请给我
的解决方案
这个问题!非常感谢!
我添加了一些代码并修改了其中的几个部分,但是post无法提交。
Checkdetail
//CheckDoc.js
import React from 'react';
import MaterialTable , { MTableAction } from 'material-table';
import {Button} from '@material-ui/core/';
import { useHistory } from "react-router-dom";
import Checkdetail from './Checkdetail.js';
export default function CheckDoc() {
const [state, setState] = React.useState({
columns: [
{ title: "Ngày nộp đơn", field: "date" },
{ title: "Tên Văn bản", field: "namedoc" },
{ title: "Người nộp", field: "nameapplier" }
],
data: [
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Trinh Huynh" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Hua Thu" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Nhat Huynh" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Thanh Tran" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Van Kiet" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Phuc Hau" }
]
});
const history = useHistory();
const routeChange = () => {
let path = "Checkdetail";
history.push(path);
};
const { useState } = React;
const [selectedRow, setSelectedRow] = useState(null);
return (
<MaterialTable
// format some options
options={{
search: true,
rowStyle: rowData => ({
backgroundColor:
selectedRow === rowData.tableData.id ? "#C2D6EE" : "#FFF"
}),
headerStyle: {
backgroundColor: "default ",
color: "#111"
},
actionsColumnIndex: -1
}}
localization={{
header: {
actions: "Trạng Thái"
},
toolbar: {
searchTooltip: "Search",
searchPlaceholder: "Tìm kiếm..."
}
}}
// Button checked
actions={[
{
icon: "save",
tooltip: "Save User"
}
]}
components={{
Action: props => (
<Button
color="secondary"
variant="contained"
style={{ maxWidth: "75px", maxHeight: "50px" }}
size="small"
onClick={routeChange}
>
Xét duyệt
</Button>
)
}}
title="Xét duyệt"
columns={state.columns}
data={state.data}
/>
);
}
//Checkdetail.js
export default function Checkdetail() {
return (
<div className="row">
<div className="col col-lg-7">
<form>
<img
id="img_resize"
src="assets/img/bao-cao-tong-ket-cong-tac-nam-1.png"
/>
<button className="btn btn-primary" id="btn_checked" type="button">
Duyệt
</button>
<button className="btn btn-primary" id="btn_cancel" type="button">
Huy
</button>
</form>
</div>
<div
className="col col-lg-5"
src="assets/img/bao-cao-tong-ket-cong-tac-nam-1.png"
>
<form>
<div className="form-group">
<label>
Tên văn bản:
<input
className="form-control"
type="text"
id="input_note"
placeholder="Báo cáo tổng kết cuối năm"
/>
</label>
</div>
<div className="form-group">
<label>
Ngày nộp:
<input
className="form-control"
type="text"
id="input_note"
placeholder="23/05/2020"
/>
</label>
</div>
<div className="form-group">
<label>Ghi chú </label>
<textarea className="form-control" defaultValue={""} />
</div>
<button className="btn btn-primary" id="btn_checked" type="button">
Luu
</button>
</form>
</div>
</div>
);
}
假设您在应用中的某处正确设置了 Router
,并且 Route
和 path="/checkdetail"
,那么您需要推送到相同的路径。
所以,给定一些路线
<Route path="/checkdetail" component={Checkdetail} />
然后你可以推送一条新路由到“/checkdetail”
const routeChange = () => history.push("/checkdetail");
您将回调附加到按钮的方式没问题。
你好!你能帮我看看如何点击按钮=>它会变成其他组件(检查细节)当我点击按钮xet duyet。但是
不显示 Checkdetail 的内容。请给我
的解决方案
这个问题!非常感谢!
我添加了一些代码并修改了其中的几个部分,但是post无法提交。 Checkdetail
//CheckDoc.js
import React from 'react';
import MaterialTable , { MTableAction } from 'material-table';
import {Button} from '@material-ui/core/';
import { useHistory } from "react-router-dom";
import Checkdetail from './Checkdetail.js';
export default function CheckDoc() {
const [state, setState] = React.useState({
columns: [
{ title: "Ngày nộp đơn", field: "date" },
{ title: "Tên Văn bản", field: "namedoc" },
{ title: "Người nộp", field: "nameapplier" }
],
data: [
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Trinh Huynh" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Hua Thu" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Nhat Huynh" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Thanh Tran" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Van Kiet" },
{ date: "20/2/02/2020", namedoc: "Báo Cáo", nameapplier: "Phuc Hau" }
]
});
const history = useHistory();
const routeChange = () => {
let path = "Checkdetail";
history.push(path);
};
const { useState } = React;
const [selectedRow, setSelectedRow] = useState(null);
return (
<MaterialTable
// format some options
options={{
search: true,
rowStyle: rowData => ({
backgroundColor:
selectedRow === rowData.tableData.id ? "#C2D6EE" : "#FFF"
}),
headerStyle: {
backgroundColor: "default ",
color: "#111"
},
actionsColumnIndex: -1
}}
localization={{
header: {
actions: "Trạng Thái"
},
toolbar: {
searchTooltip: "Search",
searchPlaceholder: "Tìm kiếm..."
}
}}
// Button checked
actions={[
{
icon: "save",
tooltip: "Save User"
}
]}
components={{
Action: props => (
<Button
color="secondary"
variant="contained"
style={{ maxWidth: "75px", maxHeight: "50px" }}
size="small"
onClick={routeChange}
>
Xét duyệt
</Button>
)
}}
title="Xét duyệt"
columns={state.columns}
data={state.data}
/>
);
}
//Checkdetail.js
export default function Checkdetail() {
return (
<div className="row">
<div className="col col-lg-7">
<form>
<img
id="img_resize"
src="assets/img/bao-cao-tong-ket-cong-tac-nam-1.png"
/>
<button className="btn btn-primary" id="btn_checked" type="button">
Duyệt
</button>
<button className="btn btn-primary" id="btn_cancel" type="button">
Huy
</button>
</form>
</div>
<div
className="col col-lg-5"
src="assets/img/bao-cao-tong-ket-cong-tac-nam-1.png"
>
<form>
<div className="form-group">
<label>
Tên văn bản:
<input
className="form-control"
type="text"
id="input_note"
placeholder="Báo cáo tổng kết cuối năm"
/>
</label>
</div>
<div className="form-group">
<label>
Ngày nộp:
<input
className="form-control"
type="text"
id="input_note"
placeholder="23/05/2020"
/>
</label>
</div>
<div className="form-group">
<label>Ghi chú </label>
<textarea className="form-control" defaultValue={""} />
</div>
<button className="btn btn-primary" id="btn_checked" type="button">
Luu
</button>
</form>
</div>
</div>
);
}
假设您在应用中的某处正确设置了 Router
,并且 Route
和 path="/checkdetail"
,那么您需要推送到相同的路径。
所以,给定一些路线
<Route path="/checkdetail" component={Checkdetail} />
然后你可以推送一条新路由到“/checkdetail”
const routeChange = () => history.push("/checkdetail");
您将回调附加到按钮的方式没问题。