javascript 在 React Material UI 表中使用按钮

Using Buttons in React Material UI Table

提问by Yashank Varshney

I have made a table using Material UI where I have two buttons in the first column of every row. I wish to edit/delete rows on clicking these but Im stuck on logic. Is it even possible with my implementation ? If not then what's the preferred way of doing so?

我使用 Material UI 制作了一个表格，其中每行的第一列中有两个按钮。我希望在单击这些行时编辑/删除行，但我坚持逻辑。我的实现甚至有可能吗？如果不是，那么这样做的首选方式是什么？

render() {
  var deleteIcon =
  (<IconButton onClick={console.log("delete")}>
    <DeleteIcon color="secondary" />
  </IconButton>
  );

  const editIcon = (
    <IconButton onClick={console.log("edited")}>
      <EditIcon color="primary" />
    </IconButton>
  );

return(
  <TableBody>
   {this.state.serviceData.map(n => {
    return (
     <TableRow key={n.id}>
      <TableCell style={styles.editor} component="th" scope="row">
        {deleteIcon}
        {editIcon}
      </TableCell>
     <TableCell>{n.domain}</TableCell>
   <TableCell>{n.service_name}</TableCell>
  </TableCell>
 </TableRow>
)};

And my result is :

我的结果是：

回答by Yashank Varshney

Building on @st4rl00rd's comment, I was able to tie the buttons using :

以@st4rl00rd 的评论为基础，我能够使用以下方法绑定按钮：

const editIcon = (
      <IconButton onClick={this.editItem}>
        <EditIcon color="primary" />
      </IconButton>
    );

and binding them in the constructor. I was able to get the selected row data by doing :

并将它们绑定到构造函数中。我能够通过执行以下操作获取选定的行数据：

       <TableBody>
            {this.state.serviceData.map(n => {
              return (
                <TableRow key={n.id} onClick={this.getData.bind(this,n)}>

回答by anonymous_siva

I have recreated your problem and solved the problem with my logic.

我已经重新创建了您的问题并用我的逻辑解决了问题。

I passed the indexof each element as a parameter to the handler functions.

我将index每个元素的 作为参数传递给处理程序函数。

Eg:

例如：

const editIcon = index => (
      <IconButton onClick={() => this.editComponent(index)}>
        <EditIcon color="primary" />
      </IconButton>
    );

DELETION

删除

For deletion, pass the index as params to the handler function and delete the element at specified index using spliceoperator.

对于删除，将索引作为参数传递给处理函数，并使用splice运算符删除指定索引处的元素。

deleteComponent(index) {
    const serviceData = this.state.serviceData.slice();
    serviceData.splice(index, 1);
    this.setState({ serviceData });
  }

EDITING

编辑

I have used a state called indexto keep track of the index the user is currently editing. Initially the indexis -1

我使用了一种称为index跟踪用户当前正在编辑的索引的状态。最初index是 -1

So whenever the user clicks edit button the editedIndexis updated.

因此，每当用户单击编辑按钮时，editedIndex就会更新。

editComponent(index) {
    this.setState({ editedIndex: index });
  }

I created two TextField Component which is shown at the specified cell (the cell where editbutton is clicked)

我创建了两个 TextField 组件，它们显示在指定的单元格（单击编辑按钮的单元格）

const editDomain = (
      <TextField
        id="domain"
        label="Domain"
        className={classes.textField}
        value={this.state.editedDomain}
        margin="normal"
        onChange={this.handleChange('editedDomain')}
      />
    );
    

So Whenever the rendering component Index is equal to editedIndex the editing Compomemts are shown at corresponding Tablecell

因此，每当渲染组件索引等于editedIndex 时，编辑 Compomemts 将显示在相应的 Tablecell 中

<TableCell>
  {serviceData.indexOf(n) === editedIndex
    ? editDomain
    : n.domain}
</TableCell>

回答by Adnan shah

I suppose you want to do this

我想你想这样做

I have done same using React-Table here is the link for my project repo you can consider this as an example:

我使用 React-Table 做了同样的事情，这里是我的项目存储库的链接，您可以将其视为示例：

https://github.com/AdnanShah/ReactJS-KretaHub-/blob/Thank_You_Init/src/app/routes/dashboard/routes/Default/rows.js

https://github.com/AdnanShah/ReactJS-KretaHub-/blob/Thank_You_Init/src/app/routes/dashboard/routes/Default/rows.js