Как вызвать функцию из другого js-файла (класса) Не удалось выполнить привязку функций приложения React с помощью мышеловки - PullRequest
Новая
       24

Как вызвать функцию из другого js-файла (класса) Не удалось выполнить привязку функций приложения React с помощью мышеловки

0 голосов
/ 25 апреля 2019

Я использую мышеловку с приложением React для создания некоторых сочетаний клавиш.Используя React Data Grid на панелях инструментов, я хочу вызвать их все горячими клавишами.Хотя я обнаружил, что некоторые функции могут срабатывать, а другие - нет, я подумал, может быть, мне нужно вызвать функцию, которая вызывает кнопку, которая находится в другом файле js (ButtonToolbar.js).

Текущая сборка App.js 

import ButtonToolbar from './ButtonToolbar';
componentDidMount() {
    Mousetrap.bind(['ctrl+enter'], this.handleAddRow);
    // only add row works immediately
    Mousetrap.bind(['ctrl+f'], this.handleFilterChange); 
    // causedd error this line "delete newFilters[filter.column.key];"
    // Uncaught TypeError: Cannot read property 'key' of undefined
    Mousetrap.bind(['ctrl+delete'], this.handleDeleteRow); 
    // function is not called
  }

  componentWillUnmount() {
    Mousetrap.unbind(['ctrl+f'], this.handleFilterChange);
    Mousetrap.unbind(['ctrl+delete'], this.handleDeleteRow);
  }

  handleAddRow = ({ newRowIndex }) => {
    console.log('handleAddRow is called')
    this.addNewRow();
  };

  addNewRow = () => {
    // some logic
  }

  handleFilterChange = (filter) => {
    let newFilters = Object.assign({}, this.props.filters);
    if (filter.filterTerm) {
      newFilters[filter.column.key] = filter;
      const labels = filter.rawValue.map(v => v.label);
      const filteredProjects = labels.length === 0 ? this.props.projects : this.props.projects.filter(p => labels.includes(p.project) || labels.includes(p.domain) || labels.includes(p.date));
      this.props.updateStats(filteredProjects);

    } else {
      delete newFilters[filter.column.key];
      this.props.updateStats(this.props.projects);
    }
    this.setState({ filters: newFilters });
  };

  onClearFilters = () => {
    this.setState({ filters: {} });
  };

  handleDeleteRow(e) {
    // deletion logic
  }

  render() {
    return (
      <div onKeyPress={this.handleKeyPress}>
        <Responsive>
              <ReactDataGrid
                toolbar={<ButtonToolbar
                  onAddRow={this.handleAddRow.bind(this)}
                  onDeleteRow={this.handleDeleteRow.bind(this)}
                  enableFilter={true}>
                </ButtonToolbar>}
                onAddFilter={this.handleFilterChange}
                onClearFilters={this.onClearFilters}
                getValidFilterValues={this.getValidFilterValues}
              />
        </Responsive>
      </div >
    );
  }

ButtonToolbar.js 

import { Toolbar } from 'react-data-grid-addons';
import React from 'react';

export default class ThreeButtonToolbar extends Toolbar {
    onDeleteRow(e) {
      // some logic
    }

    renderDeleteRowButton() {
      // some logic
    }
    render() {
        return (
            <div className="react-grid-Toolbar">
                <div className="tools">
                    {this.renderAddRowButton()}
                    {this.renderDeleteRowButton()}
                </div>
            </div>);
    }
}

в заключение:

  • Добавление новых строк работает немедленно

  • Фильтр вызвал ошибку

  • Удалить строку не называется

Я думаю, что это разные проблемы, и я не уверен, что моя мысль об исправленииФункция удаления была правильной, потому что я не понял, как вызвать onDeleteRow в другом классе файлов js.Любые комментарии приветствуются.

...