Question

我有一个呈现表格的组件。

表格的每一行都有一个按钮，用于打开所选行的详细页面。

如何在给定行按钮的OnClick事件上打开弹出页面，传递一些参数？

import React from 'react';

const Benchmarks = ({ indicator_name , indicator_desc, indicator_bench, indicator_approx_date, indicator_avg_field, detail_link}) => { 

const handleClick = (e)=> {
    console.log(e)
    //how to open pop up page passing parameters?    
    }

    return(
        <tr>
            <td>{indicator_name}</td>
            <td>{indicator_desc}</td>
            <td>{indicator_bench}</td>
            <td>{indicator_approx_date}</td>
            <td>{indicator_avg_field}</td>
            <td> 
                <button
                     onClick={() => handleClick(detail_link)}>
                    {"Detailed Map"}
                </button>
            </td>
        </tr>
    );
}

export default Benchmarks;

Answer 1

您的功能组件无效。浏览此链接。

https://reactjs.org/docs/components-and-props.html

如果你已经意识到这一点并且知道了javascript和React的道具概念，那么就提升状态

const Benchmarks = ({ indicator_name , indicator_desc, indicator_bench, indicator_approx_date, indicator_avg_field, detail_link,handleClick, showModal}) => { 

    if(showModal) {
      return <ModalComponent/>
    }
    return(
        <tr>
            <td>{indicator_name}</td>
            <td>{indicator_desc}</td>
            <td>{indicator_bench}</td>
            <td>{indicator_approx_date}</td>
            <td>{indicator_avg_field}</td>
            <td> 
                <button
                     onClick={() => handleClick(detail_link)}>
                </button>
            </td>
        </tr>
    );
}

在parentComonent内部 handleClick是更新showModal状态并作为道具传递的函数现在在Benchmarks

https://reactjs.org/tutorial/tutorial.html#lifting-state-up

在组件的onClick事件上打开弹出页面做出反应

1 个答案: