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

Posted 2023-03-22

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

【英文标题】：How to map the data in the columns type "dropdown" source in react handsontable?

【发布时间】：2019-03-31 19:32:12

【问题描述】：

<HotTable root="hot" ref="hot" settings=this.state.settings  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状态变量数据。

【参考方案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
          
          stretchH="all" />
      </div>
    );

  


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

【讨论】：

我只需要用户名，而不是“Pallet”、“Box”，“Pallet”、“Box”这些只是静态的，而不是我们需要单独填充用户名

如果您不关心静态值，请将列源选项初始化为空数组，获取componentDidMount 中的数据并更新列源选项。在从 API 获取数据之前，您甚至可以决定不渲染 HotTable。那是你的电话。在任何情况下，都应该向用户显示一些进度指示器，表明正在获取表的数据。

_react3.default.createRef 不是函数

您可能想查看您正在运行的 React 库的版本以及在该版本中创建 refs 的方式，请查看文档。

15.6.2 是我的反应版本