Question

我已经使用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>
)};

我的结果是：

Answer 1

基于@ st4rl00rd的注释，我能够使用：

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

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

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

Answer 2

我想你想这样做

我已经使用React-Table进行了相同的操作，这是我的项目仓库的链接，您可以将其视为示例：

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

Answer 3

我已经在CodeSandBox中重新创建了您的问题，并用我的逻辑解决了该问题。

如果您对以下说明感到困惑，请查看SandBox链接here。

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

例如：

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

删除

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

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

编辑

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

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

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

我创建了两个TextField Component，它们显示在指定的单元格（单击editbutton的单元格中）

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

因此，只要呈现组件的索引等于editedIndex，就会在相应的Tablecell中显示编辑的Compomemts

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

在React Material UI表中使用按钮

3 个答案: