problem with get input value inside of jqxwindow

[kashehiParticipant]

Hi,
I have multiple js file
//// js file for create button
import { useState } from ‘react’;
import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;

const Button = ({ onClick, value, className, style }) => {
const [state, setState] = useState({
width: ‘5%’
});
const buttonsStyle= { float: “right”, marginRight: 5,marginTop:10 };
return (

<JqxButton
className={className}
width={state.width}
theme={‘energyblue’}
onClick={onClick}
rtl={true}
value={value}
style={buttonsStyle}
/>
)
}

export default Button

//// js file for create window
import { forwardRef } from ‘react’
import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;
const Window = forwardRef((props, ref) => (
<JqxWindow
ref={ref}
width={“auto”}
height={“auto”}
position = {{ x: 60, y: 175 }}
showCollapseButton = { true}
theme=’energyblue’
draggable = { true}
resizable = { true}
autoOpen={false}
rtl={true}
isModal={true}
modalOpacity={0.3}

>
{
props.children
}
</JqxWindow >
))

export default Window
/// js file for create windowbutton
import React, { useRef, useState, useEffect } from ‘react’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’;
import Window from ‘../pages/windows’;
import Button from ‘../pages/buttons’;
import { Create } from ‘../data/companydata’

const CRUDButtons = () => {

const createWindowRef = useRef(null);
const readWindowRef = useRef(null);
const updateWindowRef = useRef(null);
const deleteWindowRef = useRef(null);

function onCreateButtonClick() {
createWindowRef.current.open()
}
//function onReadButtonClick() {
// readWindowRef.current.open()
//}
//function onUpdateButtonClick() {
// updateWindowRef.current.open()
//}
function onDeleteButtonClick() {
deleteWindowRef.current.open()
}

function Hidewindow() {
createWindowRef.current.close()
}

// برای دریافت مقادیر فیلدهای ورودی

const handleInputChange = (e) => {
console.log(‘key’)
const { name, value } = e.target;
setData({
…data,
[name]: value,
});
};

const [data, setData] = useState({

OrganizeName: ”,
Manage: ”,
Tel: ”,
Fax: ”,
Address: ”

})

useEffect(() => {

window.addEventListener(“input”, handleInputChange);
return () => {
window.removeEventListener(“input”, handleInputChange);
};
}, [handleInputChange]);

/* const { data}=useGetData()*/
return (
<>
<Window ref={createWindowRef} >
<div >ایجاد</div>
<div >
<label >نام شرکت </label>
<input type=”text”
value={data.OrganizeName}
name=”OrganizeName”
onChange={handleInputChange}
></input>

<label >مدیر عامل </label>
<input type=”text” id=”Manage”
value={data.Manage}
name=”Manage”
onChange={handleInputChange}
></input>

<label >شماره تماس </label>
<input type=”text”
value={data.Tel}
name=”Tel”
onChange={handleInputChange}
>
</input>

<label >دور نگار </label>
<input type=”text” id=”Fax”
value={data.Fax}
name=”Fax”
onChange={handleInputChange}
>

</input>
<label >آدرس </label>
<textarea name=”Text1″ rows=”2″
value={data.Address}
name=”Address”
onChange={handleInputChange}
>
</textarea>

<Button type=”submit” onClick={() => { Create(data) }} value={‘ثبت’}></Button>
<Button type=”submit” onClick={Hidewindow} value={‘انصراف’}></Button>
</div>
</Window>

<Window ref={deleteWindowRef} >
<div><span>Delete Header</span></div>
<div style={{ overflow: ‘hidden’ }}>Delete Content</div>
</Window >

<Button onClick={onCreateButtonClick} value={‘ایجاد’}></Button>

<Button onClick={onDeleteButtonClick} value={‘حذف گروهی’}></Button>
</>
)
}
export default CRUDButtons

///// js file foe create company component
import { useRef, useEffect, useState } from ‘react’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import JqxGrid, { jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid’;
import { GetCompanies } from ‘../data/companydata’
import CRUDButtons from ‘../pages/windowbutton ‘;
export default function BindCompany() {

// const myGrid = useRef(null);

const [source, setSource] = useState({
datafields: [
{ name: ‘Id’, type: ‘int’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘AdminFullName’, type: ‘string’ },
{ name: ‘edit’, type: ‘bool’ },
{ name: ‘delete’, type: ‘bool’ }
],
datatype: ‘json’
});

useEffect(() => { updateGrid() }, []);

// useEffect(() => myGrid.current.updatebounddata(‘sort’), [source]);
// THE ABOVE LINE IS USELESS BECAUSE WHEN THE COMPONENTS’ STATE UPDATES IT WILL TRIGGER A RERENDER
// THIS ALSO MAKES THE myGrid USELESS

const columns = [
{ text: ‘کد ‘, datafield: ‘Id’, hidden: true },
{ text: ‘نام شرکت’, datafield: ‘Name’, width: ’40 %’, cellsalign: ‘right’ },
{ text: ‘مدیر عامل’, datafield: ‘AdminFullName’, width: ’40 %’, cellsalign: ‘right’ },
{ text: ‘ویرایش’, datafield: ‘edit’, width: ’10 %’, cellsalign: ‘center’, cellsrenderer: editrenderer, editable: false },
{ text: ‘حذف’, datafield: ‘delete ‘, width: ’10 %’, cellsalign: ‘center’, cellsrenderer: delrenderer, editable: false },
];

function editrenderer(row, datafield, value) {
return ”;
};

function delrenderer(row, datafield, value) {
return ”;
};

function updateGrid() {

GetCompanies()
.then(data =>
setSource(source => ({
…source,
localdata: data
}))
)

}

return (
<>
<div>
<JqxGrid
// ref={myGrid}
width={‘100%’}
height={‘100%’}
source={new jqx.dataAdapter(source)}
columns={columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
editable={true}
selectionmode={‘singlecell’}
theme={‘energyblue’}
/>
</div>
<div> <CRUDButtons></CRUDButtons>
</div>
</>

)
}

in company.js I called one button for create and after click on button open jqxwindow with multiple input.
I want to write text on input and then with button send values to server and save in database.
but onchange event not work, and it forced me to call useeffect with eventlistener but another problem is when I want to write in input after write one character mouss disapear and again I should click on input and write.
would you please tell me what is wrong with my code and how can I solve it?
thank you

[svetoslav_borislavovParticipant]

Hi,

You can use an uncontrolled form for your case, it is not necessary to keep the input data in a state and manage it with onChange.
Here is you component converted to an uncontrolled form:

import React, { useRef, useState, useEffect } from ‘react’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’;
import Window from ‘./MyWindow’;
import Button from ‘./MyButton’;

// import { Create } from ‘../data/companydata’

const CRUDButtons = () => {

const createWindowRef = useRef(null);
const deleteWindowRef = useRef(null);

function onCreateButtonClick() {
createWindowRef.current.open()
}

function onDeleteButtonClick() {
deleteWindowRef.current.open()
}

function Hidewindow() {
createWindowRef.current.close()
}

// برای دریافت مقادیر فیلدهای ورودی

const handleCreateDataButtonClick = (e) => {

const formdata = new FormData(e.currentTarget.closest(‘form’))

const organizeName = formdata.get(‘organizeName’)
const manage = formdata.get(‘manage’)
const tel = formdata.get(‘tel’)
const fax = formdata.get(‘fax’)
const address = formdata.get(‘address’)

//Create your data
}

return (
<>
<Window ref={createWindowRef} >
<div >ایجاد</div>
<div>
<form>
<label >نام شرکت </label>
<input type=”text” name=”organizeName” />
<label >مدیر عامل </label>
<input type=”text” id=”Manage” name=”manage” />
<label >شماره تماس </label>
<input type=”text” name=”tel” />
<label >دور نگار </label>
<input type=”text” id=”Fax” name=”fax” />
<label >آدرس </label>
<textarea rows=”2″ name=”address”></textarea >

<Button onClick={handleCreateDataButtonClick} value={‘ثبت’}></Button>
<Button onClick={Hidewindow} value={‘انصراف’}></Button>
</form>
</div >
</Window >

<Window ref={deleteWindowRef} >
<div><span>Delete Header</span></div>
<div style={{ overflow: ‘hidden’ }}>Delete Content</div>
</Window >

<Button onClick={onCreateButtonClick} value={‘ایجاد’}></Button>

<Button onClick={onDeleteButtonClick} value={‘حذف گروهی’}></Button>
</>
)
}

export default CRUDButtons

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[kashehiParticipant]

Hi,
Thank you so much for your complete response, It helps me.
Thank you

[Author]

Posts