Question

在这个reactjs应用程序中，我有一个包含以下主体的表：

            <tbody>
                {results.map(result =>
                    <tr key={result.metric} onClick={this.handleClick}>
                        <td className="inpt-td">{result.t00}</td>
                        <td className="inpt-td">{result.t01}</td>
                        <td className="inpt-td">{result.t02}</td>
                        <td className="inpt-td">{result.t03}</td>
                        <td className="inpt-td">{result.t04}</td>
                        <td className="inpt-td">{result.t05}</td>
                        <td className="inpt-td">{result.t06}</td>
                        <td className="inpt-td">{result.t07}</td>
                        <td className="inpt-td">{result.t08}</td>
                        <td className="inpt-td">{result.t09}</td>
                        <td className="inpt-td">{result.t10}</td>
                        <td className="inpt-td">{result.t11}</td>
                        <td className="inpt-td">{result.t12}</td>
                        <td className="inpt-td">{result.t13}</td>
                        <td className="inpt-td">{result.t14}</td>
                        <td className="inpt-td">{result.t15}</td>
                        <td className="inpt-td">{result.t16}</td>
                        <td className="inpt-td">{result.t17}</td>
                        <td className="inpt-td">{result.t18}</td>
                        <td className="inpt-td">{result.t19}</td>
                        <td className="inpt-td">{result.t20}</td>
                        <td className="inpt-td">{result.t21}</td>
                        <td className="inpt-td">{result.t22}</td>
                        <td className="inpt-td">{result.t23}</td>
                    </tr>
                )}
            </tbody>

此特定表不存在标题，但我想知道是否有办法获取单击的单元格的列名称。因此，例如，如果您单击给定行中的第二个单元格，它将返回＆＃34; t01＆＃34;，这是列名称。

我的在线搜索没有提供有效的方法。有没有方法可以检索此信息？

Answer 1

在handleClick中，您可以访问event.target cell属性。

之后你可以这样做：

var child = event.target;
var parent = child.parentNode;
// equivalent of parent.children.indexOf(child)
var index = Array.prototype.indexOf.call(parent.children, child);
var value = 't' + index // this will be value what you are looking for

如果您需要了解如何使用event.target的信息 - 这是example。

使用onClick处理程序从行映射中获取列名

1 个答案: