单击按钮即可将行数据从同步融合网格获取到另一个页面

Question

我有一个同步融合网格，因为我在子网格中有多个列，并且还有一个带有按钮的列，单击该按钮我想转到另一个页面，该页面显示该行的所有数据，知道如何做这个吗？

Answer 1

验证您的查询后，我们可以看到您的模板列中有一个按钮，当您单击此按钮时，您希望导航到具有相应行信息的另一个页面。根据您的查询，我们准备了一个示例，并通过使用 useLocation 和 useNavigate React hook 来实现您的要求。请参阅下面的代码示例、示例和视频演示以了解更多信息。

function About() {
    let gridInstance;
    const navigate = useNavigate();
    
    function handleClick(args) { //button click of column template
        //pass the rowinformation to another componet
        const value = gridInstance.getRowInfo(args.target.closest('tr')).rowData;
        navigate('/Contact', {state: { data: value }});
    }
    function columnTemplate(props) {
        return(
            <div>
            <button type="button" onClick={handleClick.bind(props)}> Go Contact page </button>
            </div> 
        ) 
    }
    return (
        <div className='control-pane'>
            <div className='control-section'>
                
                <GridComponent ref={grid=>gridInstance=grid} dataSource={data.slice(0,5)} >
                    <ColumnsDirective>
                        <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>
                        <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                        <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' />
                        <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' />
                        <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
                        <ColumnDirective headerText='Template Column' template={columnTemplate} width='150'></ColumnDirective>
                    </ColumnsDirective>
                </GridComponent>
            </div>
        </div>
    )
}
export default About;

在 ComponentB 中，我们收到了传递的值并设置为 Grid 数据源。

const Contact =(props)=> {
    const location = useLocation();
    const dataObject = location.state.data; //received the data using useLocation()
    
    return (
        <div className='control-pane'>
            <div className='control-section'>
                <GridComponent dataSource={[dataObject]} >
                    <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective>
                        <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'></ColumnDirective>
                        <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' />
                        <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' />
                        <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150'></ColumnDirective>
                    </ColumnsDirective>
                </GridComponent>
            </div>
        </div>
    )
}
export default Contact;

示例：https://drive.google.com/file/d/1bCJOe8OxecjlfjbUn5R1Vz2L1De5Ip2m/view?usp=drive_link

视频演示：https://drive.google.com/file/d/1_4ls8BaGzIGL6AMMC37Zzjt5iGDI6zIy/view?usp=drive_link

此外，请参阅下面的公共通用链接以获取更多信息。

通用链接：react-router-dom v6 useNavigate将值传递给另一个组件