如何在react-tabulator中插入新行

Question

因此，这段代码来自官方文档，用于插入新行：

​

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

​

我正在使用..but -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>

​

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

Answer 1

我也遇到了同样的问题，下面的方法对我很有效。

首先，创建一个指向<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>

Answer 2

我自己从来没有真正使用过制表器，但从基于jQuery的方法转移到React主要是为了改变你思考事物的方式。在React中，您获取数据(状态)，并基于该数据呈现视图(一次又一次-每次数据更改时)。因此，您可以修改数据(直接向其中添加行)，而不是调用制表器本身的行添加功能(就像在上面的示例中所做的那样)，这反过来会导致制表器组件使用新行重新呈现。

所以，我想，让代码来说话吧。

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

// 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}
/>

愉快的编码，并让我知道它是否工作;)