jQuery UI Widgets Forums React React use refs from parent to child

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 4 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • React use refs from parent to child #99879

    sonu
    Participant

    I am using the jqwidget for grid in react.js. I have JqxListBox having a list of option in my parent component.

    <JqxListBox ref='myListBox' style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />

    When user select or unselect some option in jqxlistbox i want to open show and hide coloumn in the grid but the refs is not accessed in child component. How to access the jqxlistbox property in child component react. In child componentDidMount function i’m accessing the ref like.

    this.refs.myListBox.on('checkChange', (event) => {
    console.log("something");
    });

    It give me the error : TypeError: Cannot read property ‘on’ of undefined

    React use refs from parent to child #99922

    Hristo
    Participant

    Hello imsonujangra,

    I tested this example and it seems to work fine:

    import React from 'react';
    import ReactDOM from 'react-dom';
     
    import JqxGrid from '../../jqwidgets-react/react_jqxgrid.js';
    import JqxButton from '../../jqwidgets-react/react_jqxbuttons.js';
    import JqxListBox from '../../jqwidgets-react/react_jqxlistbox.js';
    
    class App extends React.Component {
    	constructor(props) {
    		let generateData = () => {
    			let data = new Array();
    
    			let firstNames =
    				[
    					'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
    				];
    
    			let lastNames =
    				[
    					'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
    				];
    
    			let productNames =
    				[
    					'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
    				];
    
    			let priceValues =
    				[
    					'2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
    				];
    
    			for (let i = 0; i < 20; i++) {
    				let row = {};
    				let productindex = Math.floor(Math.random() * productNames.length);
    				let price = parseFloat(priceValues[productindex]);
    				let quantity = 1 + Math.round(Math.random() * 10);
    				row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
    				row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
    				row['productname'] = productNames[productindex];
    				row['price'] = price;
    				row['quantity'] = quantity;
    				row['total'] = price * quantity;
    				data[i] = row;
    			}
    			
    			return data;
    		};
    		
    		super(props);
    		this.state = { records: generateData() };
    	}	
      
    	componentDidMount() {
    		this.refs.refresh.on('click', (event) => {
                console.log('refresh');
    			this.myGrid.refresh();
            });
    		
    		this.refs.myListBox.on('click', (event) => {
                console.log("something");
    			let checkedItems = this.refs.myListBox.getCheckedItems();
    			
    			console.log(checkedItems);
            });
    	}
    		
    	render() {
            let source =
                {
                    localdata: this.state.records,
                    datatype: 'array',
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'total', type: 'number' }
                    ]
                };
    
            let dataAdapter = new jqx.dataAdapter(source);
    
            let columns =
                [
                    { text: 'Name', datafield: 'firstname', width: 120 },
                    { text: 'Last Name', datafield: 'lastname', width: 120 },
                    { text: 'Product', datafield: 'productname', width: 180 },
                    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                    { text: 'Total', datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ];
    			
    		let listBoxSource = [
    			'Item 1',
    			'Item 2'
    		];
    
            return (
    			<div>
    				<JqxGrid ref={ref => this.myGrid = ref}
    					width={850} source={dataAdapter} columns={columns}
    				/>
    				
    				<br/>
    				<JqxButton ref='refresh' value='Refresh' width={150} height={40} />
    				
    				<br/>
    				<JqxListBox ref='myListBox' style={{ float: 'left' }} width={150} height={150} source={listBoxSource} checkboxes={true} />
    			</div>
            )
        }
    }
    
    ReactDOM.render(<App />, document.getElementById('app'));

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.