React <button>

Question

我在/中使用React.JS编写了<table>代码，如下所示：

      {data.length > 0 && (
        <tbody>
          {data.map(
            ({ name, activationDate, lastUsage, token, status }) => {
              return (
                <tr key={`${name}${token}`}>
                  <td>{name}</td>
                  <td>{activationDate}</td>
                  <td>{lastUsage}</td>
                  <td>{token}</td>
                  <td>{status}</td>
                  <td>
                    <Button
                      {...css({
                        color: '#337ab7',
                        backgroundColor: 'inherit',
                        border: 'none',
                        padding: '0 12px'
                      })}
                      onClick={(e) => {
                        console.log('click event:', e)
                        this.setState({
                          showDialog: true,
                          selectedDevice: name
                        })
                      }}
                    >
                      <Glyphicon glyph="remove" />
                    </Button>
                  </td>
                </tr>
              )
            }
          )}
        </tbody>
      )}

我需要知道点击按钮属于哪一行。试图在.bind(this)之前添加</tbody>作为：

  )}.bind(this)
</tbody>

得到validateDOMNesting(...): Text nodes cannot appear as a child of <tbody>.

这样做的正确方法是什么？

Answer 1

您正在使用箭头功能。您不必甚至可以绑定箭头函数，因为它们总是继承封闭的上下文。

更多信息on MDN。