Вызов табличной функции табулятора в React - PullRequest
Новая
       37

Вызов табличной функции табулятора в React

0 голосов
/ 20 января 2020

Я использую Tabulator в React с модулем реагирования-табулятором.

Я упускаю что-то очень простое c, вероятно, из-за моих новых знаний о React. Реализуя этот модуль, я знаю, как подключить обратный вызов табулятора к функции javascript. Но я не знаю, как вызвать метод табулятора. Например: 

  const options = {
    height: '100%',
    ajaxURL: 'http://example.com',
    ajaxProgressiveLoad: 'scroll',
    ajaxError: (error) => {
      console.log('ajaxError ', error);
    },
  };

...

      <ReactTabulator
        columns={columns}
        layout="fitColumns"
        data={[]}
        options={options}
      />

Здесь обратный вызов ajaxError передается в ReactTabulator и вызывается при необходимости.

Теперь модуль табулятора имеет много методов, например setData. За пределами React это можно использовать следующим образом: 

var table = new Tabulator("#example-table", {
    ajaxURL:"http://www.getmydata.com/now", //ajax URL
});

...

table.setData("http://www.getmydata.com/now");

Как мне перевести это в мир React (в среде ловушек), поскольку у меня нет прямого доступа к эквиваленту '' таблица 'объект? Нужно ли мне добраться до моего объекта табулятора с помощью getElementById или чего-то подобного?

Ответы [ 2 ]

0 голосов
/ 20 января 2020

Я считаю, что решение заключается в использовании ссылки, как описано здесь: https://reactjs.org/docs/refs-and-the-dom.html, в разделе:

Ссылки и функциональные компоненты

По умолчанию вы не можете использовать атрибут ref на компонентах функций, потому что они не имеют экземпляров:

...

Однако вы можете использовать атрибут ref внутри компонента функции как Пока вы ссылаетесь на элемент DOM или компонент класса:

Используя этот подход, я могу получить доступ к методу setData моего табулятора. 

const tableDisplay = (props) => {
  const tableRef = createRef();

  // I can now use setData in various effects:
  // if ((tableRef.current) && (tableRef.current.table)) {
  //    tableRef.current.table.setData();

  return (
      <ReactTabulator
        ref={tableRef}
        columns={columns}
        layout="fitColumns"
        data={[]}
        options={options}
      />
  );
};

Это прекрасно работает, я я просто не уверен, что это «чистый» способ go об этом?

0 голосов
/ 20 января 2020

Вам нужно получить API из useEffect и использовать его результат. Вот пример 

import React,{ useState, useEffect }from "react"
import { ReactTabulator } from "react-tabulator"

const Dashboard = props => {
    const [data,setData] = useState([])

    const getData = async () => {
        const result = await fetch("http://www.getmydata.com/now") // this is where you call the api and get its result
        setState(result.data) // this is where you set the result to your state
    }

    useEffect(()=>{
      getData()
    },[])

    const columns=[
        {
            title:"name",
            field:"name",
        },
        {
            title:"Number of Request"
            field:"noOfRequest",
        }
    ]

    return (
        <ReactTabulator
        columns={columns}
        layout="fitColumns"
        data={data} // here is the state of the table
        options={options}
        />
    )

}

export default Dashboard

Так вы получаете данные из API в React.

...