如何在 React Handsontable 中映射列类型“下拉”源中的数据？

Question

<HotTable root="hot" ref="hot" settings={this.state.settings} width="100%" strechH="all"/>

this.state = {
    settings: {
        colHeaders:['Packages'],
        data: [{packages:""}],
        columns: [{ data:"packages", type:'dropdown', source:["Pallet", "Box"] }],
        minSpareRows: 0,
        contextMenu: true,
        rowHeaders:true, 
        manualColumnResize: true,
        columnSorting: true, 
        manualRowResize: true, 
        manualRowMove: true,   
        manualColumnMove: true,
    }
}

在我使用手动源的列中，数据来自下拉菜单，如附加的截图。

但是，何时需要填充数据取决于响应。 我存储在另一个名为packagesfortable的状态变量中的响应数据@

if (type == 'PackagesList')
{
    let packageslist = UserStore._getpackagelist() || {};
    this.setState({ packageslist }, ()=>
    {
        this.setState({
            packagesfortable: this.state.packageslist.packings.map(el => el.packageName)
        });
    });
}   

如何在下拉列表中动态填充packagesfortable状态变量数据。

Answer 1

HotTable 的一个实例有一个 updateSettings 方法，可以通过选项调用该方法来更新表设置。

如果在您的HotTable React.Element 中设置了引用，则可以通过访问ref.current.HotInstance 来检索底层实例。

以下示例从 json 占位符 API 获取用户，并将列源设置更新为从 API 返回的用户名数组。

import React, { Component } from 'react';
import { render } from 'react-dom';

import 'handsontable-pro/dist/handsontable.full.css';
import { HotTable } from '@handsontable/react';

const COLUMN_DEFAULT_OPTIONS = {data: "packages", type: 'dropdown'}

class App extends Component {
  constructor() {
    super();
    this.hotTableComponent = React.createRef();

    this.settings = {
        colHeaders: ['Packages'],
        data: [{ packages: "" }],
        columns: [{ ...COLUMN_DEFAULT_OPTIONS, source: ["Pallet", "Box"] }],
        // ...other settings continue here
     }
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users", {
      headers: {
        'Accept': 'application/json',
      },
    })
    .then(response => response.json())
    .then(json => {
      const usernames = json.map(({username}) => username);
      this.hotTableComponent.current.hotInstance.updateSettings(
        {"columns": [{ ...COLUMN_DEFAULT_OPTIONS, source: usernames}]}
      )
    })

  }

  render() {
    return (
      <div id="hot-app">
        <HotTable
          ref={this.hotTableComponent}
          settings={this.settings}
          width="600"
          stretchH="all" />
      </div>
    );

  }
}

render(<App />, document.getElementById('root'));