如何在 react-tabulator 中插入新行

Question

所以这段代码是从官方文档中插入新行的：

$("#add-row").click(function(){
    $("#example-table").tabulator("addRow", {});
});

..但我正在使用 react-tabulator https://www.npmjs.com/package/react-tabulator

这是返回方法下面的布局：

<div>
        <button id="add-row" onClick={ReactTabulator("addRow")}>Add Row</button>
      </div>
        <ReactTabulator
          columns={editableColumns}
          data={data}
          footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
          options={options}
        />
      </div>

我是 React 新手，所以我不知道如何插入新行。什么可能是额外的信息，如果你想插入一个新行，你可以选择它是插入第一行还是最后一行，即使用以下选项 addRowPos:"bottom" 。

Answer 1

我自己从未真正使用过 Tabulator，但从基于 jQuery 的方法转移到 React 主要是为了改变你思考事物的方式。在 React 中，您获取数据（状态）并根据该数据呈现您的视图（一次又一次 - 每次数据更改时）。因此，您无需在 Tabulator 本身上调用行添加功能（如您在上面的示例中所做的那样），而是修改数据（将行直接添加到其中），这反过来会导致 Tabulator 组件使用新的行。

所以，让代码说话吧，我猜。

首先，您需要将数据保存在组件的状态中：

// here we initialize your data state with empty array
// and define setData function that will be used to update 'data'
const [data, setData] = useState([]);

// here we fetch the data from somewhere,
// before your component is mounted for the first time
useEffect(() => {
    // let's say we fetch it using fetch()
    const remoteData = await fetch(...);
    // we set the data to what we fetched using setData;
    // that causes component to re-render;
    // doing data = remoteData does not trigger re-rendering
    setData(remoteData);
},[]);
// this sample assumes that the fetch operation is triggered only once, at startup,
// so that's why empty array is passed as second parameter to useEffect

现在我们可以对该数据进行修改，以便制表器在添加新行后显示它。

// we define click handler for the button
const addRowClickHandler = (event) => {
    // we're setting new value of the data array,
    // which is current content of the array plus new empty object;
    // the reason why we do it this way (by making the copy of original data)
    // is because re-rendering is based on detecting the change in the data object;
    // comparison utilizes shallow equality so even after adding new element
    // with push() data===data still returns true
    setData([...data,{}]);
}

您的视图现在应该如下所示：

<div>
    <button id="add-row" onClick={addRowClickHandler}>Add Row</button>
</div>
<ReactTabulator
    columns={editableColumns}
    data={data}
    footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
    options={options}
/>

祝你编码愉快，让我知道它是否有效；）

Answer 2

我遇到了同样的问题，以下对我有用。

首先，创建一个<ReactTabulator>的引用对象。

为此，请在构造函数中启动 ref：

    constructor(props) {
        super(props);
        this.tableRef = React.createRef(); //create reference object
    }

并在<ReactTabulator> 中添加引用。

<div>
      </div>
        <ReactTabulator
        ref={this.tableRef}
          columns={editableColumns}
          data={data}
          footerElement={<span><a href="https://www.github.com/" target="_blank">Find Me On Github</a></span>}
          options={options}
        />

您现在可以按如下方式访问制表符对象：

var tabulator = this.tableRef.current.table;

要完成您的示例和附加问题，请设置 onClick 回调：

将onAddRow 方法定义为类的一部分。它调用制表符对象 (this.tableRef.current.table) 的 addRow 方法。

根据http://tabulator.info/docs/4.0/update ： addRow 的第二个参数是可选的，它确定该行是添加到表格的顶部还是底部。值为 true 会将行添加到表格顶部，值为 false 会将行添加到表格底部。

onAddRow(){
    this.tableRef.current.table.addRow({}, true); //true adds to top
}

在构造函数中将onAddRow方法绑定到this

    constructor(props) {
        super(props);
        this.tableRef = React.createRef(); //create reference object

        // This binding is necessary to make `this` work in the callback
        this.onAddRow= this.onAddRow.bind(this);
    }

点击调用addRow方法：

<button id="add-row" onClick={this.onAddRow}>Add Row</button>