React use refs from parent to child

[sonuParticipant]

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

[HristoParticipant]

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

[Author]

Posts