Как сохранить отредактированные данные строки в состояние в Handsontable React - PullRequest
Новая
       9

Как сохранить отредактированные данные строки в состояние в Handsontable React

0 голосов
/ 18 октября 2019

Я начал использовать handstatable для своего проекта реагирования. Я хотел сохранить отредактированные данные в базу данных. Итак, я хотел нажать на кнопку обновления, какие бы изменения не были сделаны, те данные, которые я хочу отправить через вызов Axios (AJAX) в бэкэнд.

Технически, что я хочу сделать, эточто после каких-либо изменений строки данных я хочу сохранить ее в состоянии. поэтому, когда будут произведены какие-либо обновления, эти данные будут добавлены в состояние, и по нажатию кнопки обновления я отправлю измененные данные строки в серверную часть посредством вызова ajax.

Ниже приведен код реакции и ручной кодЯ использую 

function testView() {
    const [data, setData] = useState([
        {
            id: 1,
            name: "Ted Right",
            address: "",
            ip: "10.1.1.1",
            os: "Windows"
        },
        {
            id: 2,
            name: "Frank Honest",
            address: "",
            ip: "10.1.1.2",
            os: "UNIX"
        },
        {
            id: 3,
            name: "Joan Well",
            address: "",
            ip: "10.1.1.3",
            os: "Windows"
        },
        {
            id: 4,
            name: "Gail Polite",
            address: "",
            ip: "10.1.1.4",
            os: "UNIX"
        },
        {
            id: 5,
            name: "Michael Fair",
            address: "",
            ip: "10.1.1.5",
            os: "Windows"
        }
    ]);
    const settings = {
        rowHeaders: true,
        colHeaders: ["id", "Name", "Address", "IP", "OS"],
        columns: [
            {
                data: "id",
                readOnly: true
            },
            {
                data: "name",
                readOnly: true
            },
            {
                data: "address"
            },
            {
                data: "ip",
                readOnly: true
            },
            {
                data: "os",
                editor: "select",
                selectOptions: ["Windows", "UNIX"]
            }
        ],
        width: "500",
        height: "300",
        manualColumnResize: true,
        headerTooltips: true,
        contextMenu: true,
        hiddenColumns: {
            columns: [0]
        },
        dropdownMenu: ["filter_by_condition", "filter_action_bar"],
        multiColumnSorting: true,
        filters: true,
        licenseKey: "non-commercial-and-evaluation"
    };

    return (
        <Fragment>
            <HotTable id="hot" data={data} settings={settings} />
        </Fragment>
    );
}

Я много гуглил, но не смог выяснить, как мне достичь своего требования в реакции.

...