如何访问映射函数中的变量值？

Question

在我的React应用程序中，我用来自数组的数据填充表行。

下面，我希望能够在单击年份td时访问notes变量的值

rows.map((row) => {
                        return <tr key={row.id}>
                            <td>{row.start}</td>
                            <td>{row.end}</td>
                            <td  onClick={(row) => console.log(row.year)}>{row.year}</td>
                            <td>{row.notes}</td>
                            <td/></td>
                        </tr>
                    })

当我单击屏幕上具有undefined 1999的td ，将输出到控制台。

有人可以帮助我了解如何获取此价值吗？

Answer 1

此代码失败， 为什么？

rows.map((row) => {
                        return <tr key={row.id}>
                            <td>{row.start}</td>
                            <td>{row.end}</td>
                            <td  onClick={(row) => console.log(row.year)}>{row.year}</td>
                            <td>{row.notes}</td>
                            <td/></td>
                        </tr>
                    })

onClick={(row) => console.log(row.year)} ， onClick={(row) => console.log(row.year)}

您假设当您单击时，在onClick回调中将获得row作为参数，那么所得到的就是事件。 因此，您的row参数是一个没有year的事件，因此您看到undefined 。

解决方案 ：

只需删除row 。

onClick={(clickEvent) => console.log(row.year)}

在箭头功能中，您可以访问row对象。

Answer 2

创建一个像这样的函数：

accessNotes(notes) {
console.log(notes)
}

并在您的HTML中这样做：

rows.map((row) => {
                    return <tr key={row.id}>
                        <td>{row.start}</td>
                        <td>{row.end}</td>
                         // You don't need to pass row
                        <td  onClick={() => {
                                      console.log(row.year);
                                      // here you call the function
                                      this.accessNotes(row.notes)
                                       }}>{row.year}</td>
                        <td>{row.notes}</td>
                        <td/></td>
                    </tr>
                })

Answer 3

您正在访问事件对象的年份，而不是行。 传递给onClick函数的第一个参数是事件对象，您也将其命名为row（也称为shadowing）。 将其命名为event或e，或者如果您不想访问该事件，则可以将其省略。 做这个。

rows.map((row) => {
    return <tr key={row.id}>
        <td>{row.start}</td>
        <td>{row.end}</td>

        <td onClick={(e) => console.log(row.year)}>{row.year}</td>

        <td>{row.notes}</td>
        <td/></td>
    </tr>
})

希望这可以帮助 ！