React <Button> 的内联绑定（this）答案

【问题标题】：Inline bind(this) for React <Button>React <Button> 的内联绑定（this）
【发布时间】：2017-11-22 05:37:01
【问题描述】：

我在/使用 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>
      )}

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

  )}.bind(this)
</tbody>

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

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

【问题讨论】：

你不能只跟踪他们在状态吗？

标签： javascript reactjs

【解决方案1】：

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

更多信息on MDN。

【讨论】：