反应组件事件未在TSX中触发

时间:2019-12-04 15:25:01

标签: reactjs tsx

这是我的自定义react组件(基本上是可编辑表)的TSX代码,该代码已与Boomi Flow Model集成在一起:

import { List } from 'lodash';
import * as React from 'react';
import './css/basic.css';
import { IComponentProps, IManywho } from './interfaces';

declare const manywho: IManywho;

class DynamicTable extends React.Component <any, any> {

    componentId: string = '';
    flowKey: string = '';
    headerList: any[] = [];
    objectList: any[] = [];

    constructor(props: IComponentProps) {
        super(props);
        this.componentId = props.id;
        this.flowKey = props.flowKey;

        const initialModel = manywho.model.getComponent(this.props.id, this.props.flowKey);
        const initialObjectData = initialModel.objectData;
        this.headerList = initialModel.columns.map((column: any) => ({
                label: column.label,
                id: column.typeElementPropertyId,
            }),
         );

        for (let pos = 0 ; pos < initialModel.objectData.length; pos++) {
            // clone data
            const objectData = JSON.parse(JSON.stringify(initialModel.objectData[pos]));
            this.objectList.push(objectData);
        }

        this.onEditCellEvent = this.onEditCellEvent.bind(this);

    }
    onEditCellEvent(event: any, objectKey: any, propertyKey: any) {
        const newValue = event.target.value ? event.target.value : 0;
        this.objectList[objectKey].properties[propertyKey].contentValue = newValue;
    }

    renderField(object: any, objectKey: any) {
        const fields: any[] = [];
        this.headerList.forEach(function(header, index) {
            const propertyKey = object.properties.indexOf(object.properties.find((property: any) => (property.typeElementPropertyId === header.id)));
            const field =
            <td key={index}>
                <input
                    type="text"
                    value={object.properties.find((property: any) => (property.typeElementPropertyId === header.id)).contentValue}
                    onInput={(event: any) => this.onEditCellEvent(event, objectKey, propertyKey)}
                />
                </td>;
            fields.push(field);
        });
        return fields;
    }

     renderRow(object: any, objectKey: any) {
        return (<tr>{this.renderField(object, objectKey)}</tr>);
     }

     render() {
        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            {this.headerList.map((object: any, objectKey: number) =>
                                <th key={objectKey}>{object.label}</th>,
                            )}
                        </tr>
                    </thead>
                    <tbody>
                        {this.objectList.map((object: any, objectKey: any) =>
                            this.renderRow(object, objectKey),
                        )}
                    </tbody>
                </table>
                <button>
                    Add Extension
                </button>
            </div>
        );
      }
 }

 // ========================================

 manywho.component.register('dynamic-table', DynamicTable);

 export default DynamicTable;

当我尝试编辑表格的单元格时,不会触发onEditCellEvent。

我尝试使用onChange或onFocus,但该事件仍未触发。

我相信带有参数的事件的语法是正确的。

0 个答案:

没有答案