React Datasheet Grid — регистрация значений копирования/вставки

Я разрабатываю приложение React для отображения данных Excel в веб-интерфейсе. Я использую для этого компонент Equify/react-datasheet-grid. Для просмотра изменений после копирования/вставки я хочу увидеть различия в консоли. Я добавил реквизиты copyValue и pasteValue в столбец albumId, чтобы посмотреть, что произойдет, но обе функции возвращают только результат:

({
      rowData
    }) => rowData

Вот мой код:

import React from 'react';
import { DataSheetGrid, textColumn } from 'react-datasheet-grid';
import 'react-datasheet-grid/dist/index.css'

function index() {
    const valueCopy = (value) => {
      console.info(value);
    }

    const valuePaste = (value) => {
      console.info(value);
    }
  
    const columns = [
      textColumn({ title: 'Album ID', key: 'albumId', copyValue: valueCopy(({ rowData }) => rowData), pasteValue: valueCopy(({ rowData }) => rowData)}),
      textColumn({ title: 'ID', key: 'id' }),
      textColumn({ title: 'Title', key: 'title' }),
      textColumn({ title: 'URL', key: 'url' }),
      textColumn({ title: 'Thumbnail URL', key: 'thumbnailUrl' }),
    ];

  
    return (
        <DataSheetGrid
            data = {data}
            onChange = {setData}
            columns = {columns}
            height = {850}
        />
    )
  }
  
  export default index;

Как я могу увидеть все изменения копирования/вставки во всей таблице? Спасибо.

javascript reactjs

24.12.2020 07:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

683

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Решено!

Хорошо, вот моя реализация:

const valueCopy = (column, data) => {
      console.info("Copied value:",data.rowData[column]);
      return data.rowData[column];
    }

    const valuePaste = (column, data) => {
      console.info("Pasted value:",column, data);
      data.rowData[column] = data.value;
      return data.rowData;
    }
  
    const columns = [
      textColumn({ title: 'Album ID', key: 'albumId', copyValue: (data)=>valueCopy("albumId", data),  pasteValue: (data)=>valuePaste("albumId", data)}),
      textColumn({ title: 'ID', key: 'id', copyValue: (data)=>valueCopy("id", data), pasteValue: (data)=>valuePaste("id", data)}),
      textColumn({ title: 'Title', key: 'title', copyValue: (data)=>valueCopy("title", data), pasteValue: (data)=>valuePaste("title", data) }),
      textColumn({ title: 'URL', key: 'url', copyValue: (data)=>valueCopy("url", data), pasteValue: (data)=>valuePaste("url", data) }),
      textColumn({ title: 'Thumbnail URL', key: 'thumbnailUrl', copyValue: (data)=>valueCopy("thumbnailUrl", data), pasteValue: (data)=>valuePaste("thumbnailUrl", data) })
    ];

А вот мой лог после копирования/вставки:

index.js:13 Copied value: officia delectus consequatur vero aut veniam explicabo molestias
index.js:13 Copied value: aut porro officiis laborum odit ea laudantium corporis
index.js:13 Copied value: qui eius qui autem sed
index.js:18 Pasted value: url {rowData: {…}, value: "officia delectus consequatur vero aut veniam explicabo molestias"}
index.js:18 Pasted value: url {rowData: {…}, value: "aut porro officiis laborum odit ea laudantium corporis"}
index.js:18 Pasted value: url {rowData: {…}, value: "qui eius qui autem sed"}

24.12.2020 11:06

Другие вопросы по теме

Как написать тело запроса с аксиомами?

React.js «SyntaxError: JSON.parse: неожиданный символ в строке 1 столбца 1 данных JSON»

Как в функциональных компонентах переформатировать несколько обработчиков изменений в одной функции?

Сборник рассказов не показывает стили

Экранирование объектов HTML и динамическое отображение URL

В React Hook useEffect отсутствует зависимость. Почему я получаю эту ошибку, когда ничего не сломано?

Почему я получаю бесконечный цикл, когда я обновляю объект с помощью setState?

TypeError: Object(...) не является функцией (React)

Как использовать библиотеку classNames в функции в реакции?

Почему useSelector не содержит никаких данных?

React Datasheet Grid — регистрация значений копирования/вставки

Ответы 1

Решено!

Другие вопросы по теме

Похожие вопросы