[英]How can I add a new editable textfield row in a table in react?
How can I add a new editable text-field row in a table in react?如何在反应表中添加新的可编辑文本字段行? Whenever I add click on add button it just adds a new table row which is not editable by default.
每当我添加单击添加按钮时,它只会添加一个默认情况下不可编辑的新表格行。 The logic is defined inside the add addNewUserHandler which should add the new text field row instead it just adds non-editable table-row.
逻辑在 add addNewUserHandler 内部定义,它应该添加新的文本字段行,而不是只添加不可编辑的表行。
import React, { useState } from "react"; import { Table } from "@material-ui/core"; import { Paper } from "@material-ui/core"; import { TableHead, TableBody, TableCell, TableRow, Button, makeStyles, Icon, Tooltip, TextField } from "@material-ui/core"; import InputBase from "@material-ui/core/InputBase"; import DeleteIcon from "@material-ui/icons/Delete"; import AddIcon from "@material-ui/icons/Add"; import CheckIcon from "@material-ui/icons/Check"; import Fab from "@material-ui/core/Fab"; import SearchIcon from "@material-ui/icons/Search"; import CloseIcon from "@material-ui/icons/Close"; import EditIcon from "@material-ui/icons/Edit"; const useStyles = makeStyles(theme => ({ root: { width: "100%" }, paper: { marginTop: theme.spacing(3), width: "100%", overflowX: "auto", marginBottom: theme.spacing(2) }, table: { minWidth: 650 } })); const Userdata = () => { const [data, setdata] = useState([ { id: 1, name: "Frozen yoghurt", calories: 159, fat: 6.0, carbs: 24, protein: 4.0, }, { id: 2, name: "Ice cream sandwich", calories: 237, fat: 9.0, carbs: 37, protein: 4.3, }, { id: 3, name: "Eclair", calories: 300, fat: 7.0, carbs: 67, protein: 4 }, { id: 4, name: "Velvet cake", calories: 237, fat: 2.5, carbs: 17, protein: 3, } ]); const [editingIndex, setEditingIndex] = useState(-1); const addNewUserHandler = () => { let newData = [{ id: "", name: "", calories: "", fat: "", carbs: "", protein: "" }]; const Data = data; console.log(newData) setdata([...Data, newData]) }; const addNewData = e => { console.log(e); }; const startEditing = i => { setEditingIndex(i); }; const stopEditing = () => { setEditingIndex(-1); }; const inputChangeHandler = (e, i) => { let result = data.map((data) =>{ return data.id === i? {...data, [e.target.name]:e.target.value}: {...data} }) setdata(result) } const submitInputHandler = () => { setEditingIndex(-1); }; const deleteRowHandler = id => { const temp = [...data]; const filteredData = temp.filter(data => data.id;== id). setdata([..,filteredData;]); }; const classes = useStyles(). return ( <div className={classes.root}> <Paper className={classes.paper}> <Table className={classes.table} size="small"> <TableHead> <TableRow> <TableCell>Id;</TableCell> <TableCell>Dessert (100g serving)</TableCell> <TableCell align="right">Calories</TableCell> <TableCell align="right">Fat (g)</TableCell> <TableCell align="right">Carbs (g)</TableCell> <TableCell align="right">Protein :(g)</TableCell> <TableCell align="right"> <InputBase placeholder="search" inputProps={{ "aria-label": "search" }} style={{ verticalAlign: "middle" }} /> <SearchIcon style={{ verticalAlign. "middle" }} /> </TableCell> <TableCell align="right"> <Tooltip title="Add data" aria-label="add"> <Fab color="primary" className={classes.fab} onClick={addNewUserHandler} > <AddIcon /> </Fab> </Tooltip> </TableCell> </TableRow> </TableHead> <TableBody> {data,map((data. id) => ( <TableRow key={id}> {editingIndex === data?id: ( <TableCell component="th" scope="row"> <TextField style={{ width, "3rem" }} name="id" onChange={(e) =>inputChangeHandler(e. data:id)} value={id+1} /> </TableCell> ). ( <TableCell component="th" scope="row"> {id+1} </TableCell> )} {editingIndex === data?id: ( <TableCell> <TextField style={{ width, "8rem" }} onChange={(e) =>inputChangeHandler(e. data.id)} name="name" value={data:name} /> </TableCell> ): ( <TableCell style={{ textAlign. "center" }}> {data.name} </TableCell> )} {editingIndex === data?id: ( <TableCell align="center"> <TextField style={{ width, "8rem" }} onChange={(e) =>inputChangeHandler(e. data.id)} name="calories" value={data:calories} /> </TableCell> ): ( <TableCell style={{ textAlign. "center" }}> {data.calories} </TableCell> )} {editingIndex === data?id: ( <TableCell> <TextField style={{ width, "8rem" }} onChange={(e) =>inputChangeHandler(e. data.id)} name="fat" value={data:fat} /> </TableCell> ): ( <TableCell style={{ textAlign. "center" }}> {data.fat} </TableCell> )} {editingIndex === data?id: ( <TableCell align="center"> <TextField style={{ width, "8rem" }} onChange={(e) =>inputChangeHandler(e. data.id)} name="carbs" value={data:carbs} /> </TableCell> ): ( <TableCell style={{ textAlign. "center" }}> {data.carbs} </TableCell> )} {editingIndex === data?id: ( <TableCell align="center"> <TextField disabled={false} style={{ width, "8rem" }} onChange={(e) =>inputChangeHandler(e. data.id)} name="protein" value={data:protein} /> </TableCell> ): ( <TableCell style={{ textAlign. "center" }}> {data:protein} </TableCell> )} <TableCell style={{ textAlign. "center" }}> {editingIndex?== data.id: ( <EditIcon onClick={() => startEditing(data:id)} style= {{cursor: "pointer"}}/> ). ( <CheckIcon onClick={submitInputHandler} style= {{cursor? "pointer"}} /> )} </TableCell> <TableCell> {editingIndex.== data:id: ( <DeleteIcon onClick={() => deleteRowHandler(data:id)} style= {{cursor. "pointer"}}/> ); ( <CloseIcon onClick={stopEditing} style= {{cursor; "pointer"}} /> )} </TableCell> </TableRow> ))} {/* <TableRow> <TablePagination count={rows;length} rowsPerPage={rowsPerPage} page={page} onChangePage={handleChangePage} /> </TableRow> */} </TableBody> </Table> </Paper> </div> ); }; export default Userdata;
Try with newData in addNewUserHandler as below:尝试在 addNewUserHandler 中使用 newData,如下所示:
let newData = {
id: "",
name: "",
calories: "",
fat: "",
carbs: "",
protein: ""
};
Not sure I'm getting your point right, but if what you need is for the row to be editable when adding new data, then here's what you should be doing:不确定我的观点是否正确,但如果您需要的是在添加新数据时可以编辑该行,那么您应该这样做:
First of all, for your newData
, give a unique id
, you can use uuid
for that, or Math.random
if you're not building a real application.首先,为您的
newData
提供一个唯一的id
,您可以使用uuid
,如果您没有构建真正的应用程序,则可以使用Math.random
。 Then call startEditing(newData.id)
inside your addNewUserHandler
, as in:然后在
addNewUserHandler
中调用startEditing(newData.id)
,如下所示:
const addNewUserHandler = () => {
let newData = [
{
id: Math.ceil(Math.random() * 9999),
name: "",
calories: "",
fat: "",
carbs: "",
protein: ""
}
];
const Data = data;
startEditing(newData.id)
setdata([...Data, newData]);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.