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>
                    })

当我单击td屏幕上的undefined到控制台时，将输出它。

有人可以帮助我了解如何访问此值吗？

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作为参数，该事件就是您所得到的。因此，您的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>
})

希望这会有所帮助！

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

3 个答案: