score:0

import React, { useCallback, useEffect, useRef, useState } from "react";
import Config from "../../../config";
import SearchForm from "../../html/common/SearchForm";

const ListPage = (props) => {

    const [editId, setEditId] = useState('');
    
    useEffect(()=>{
        console.log('ListPage Render', editId);
        if(editId){
            props.editRecord(editId);
        }
    }, [editId]);

    return(
        <div>
            <SearchForm placeholder="keyword" 
                id="kt_datatable_search_query"
                buttonId="kt_datatable_search_submit" 
            />
            <input name="editId" type="text" onInput={(e)=>setEditId(e.target.value)} value={editId} />
            <div id="kt_datatable"></div>
        </div>
    )
}

jQuery(function() {
    KTDatatableBasic.init();

    // ====== Answer: Need to fire input event manually =====
    window.updateEditId = function(id) {
        var ev = new Event('input', { bubbles: true});
        // ev.simulated = true;
        $("input[name='editId']").val(id)[0].dispatchEvent(ev);
    }
});

"use strict";
// Class definition
...
...
... 

/** as per above **/

Related Query

More Query from same tag