这是我的自定义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,但该事件仍未触发。
我相信带有参数的事件的语法是正确的。