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

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>

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

我的在线搜索没有提供执行此操作的有效方法。是否有检索此信息的方法？

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 .