Question

sortedReports.map(item => {

    return (
    <tr key={item.rowNumber}>
        <td>  {item.year}</td>

        <td> {item.month}</td>

        <td> {item.bruto_ukupno}</td>
        <td> {item.neto_plata}</td>
        <td> {item.topli_obrok}</td>

        <td> {item.doprinosi}</td>
        <td> {parseInt(item.ukupno_plata)}</td>

        <td className="table-actions">
            <Link **onClick={}**

                    to={`/reports/details`}>
                <PieChart size="21"/>
            </Link>

        </td>
    </tr>
)});

我需要点击，存储其值并将其传递到另一个组件，我需要根据点击的月份来过滤员工。

非常感谢你：）

Answer 1

我会利用currying来创建函数“绑定”（但不是在.bind意义上）到该项的值。即。

// as a class method
const createClickHandler = (itemValue) => e => {
   //...doStuff
};

然后在映射时传递项值来利用它。

<Link onClick={this.createClickHandler(item)}
      to={`/reports/details`}>
      <PieChart size="21"/>
</Link>

Answer 2

您可以将该项目作为extra argument to bind()传递。列出他的：

sortedReports.map(item => {

    return (
    <tr key={item.rowNumber}>
        <td>  {item.year}</td>

        <td> {item.month}</td>

        <td> {item.bruto_ukupno}</td>
        <td> {item.neto_plata}</td>
        <td> {item.topli_obrok}</td>

        <td> {item.doprinosi}</td>
        <td> {parseInt(item.ukupno_plata)}</td>

        <td className="table-actions">
            <Link onClick={this.handleClick.bind(this,item)}
                to={`/reports/details`}>
                <PieChart size="21"/>
            </Link>

        </td>
    </tr>
)});

然后handleClick可能如下所示：

handleClick(item) {
    // Do what you want on click
}

我在这里绑定了整个选定的对象，但如果能让代码在其他地方更清晰，你可以绑定item.rowNumber。

如何知道在使用map函数时单击了哪个元素以及如何将该值传递给另一个组件？

2 个答案: