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

在我正在使用手动来源的列中，数据如附件sceenshot一样出现在下拉列表中。

但是，何时需要填充数据取决于响应。我存储在另一个称为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'));

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

1 个答案: