-
Choerodon平台版本:0.5.0
-
运行环境(如localhost或k8s):localhost
-
遇到问题时的前置条件:
-
问题描述:
在一个js文件里,创建两个组件(父与子组件)页面加载时报错
-
修改的数据:
{ import React, { Component } from 'react';
import { Table, Button, Popconfirm, Input, Icon } from ‘antd’;
import { observer } from ‘mobx-react’;
import { withRouter } from ‘react-router-dom’;
// import asyncRouter from ‘…/…/…/…/…/util/asyncRouter’;
//
// const EditableCell = asyncRouter(() => import(’./EditableCell’));
@observer
class EditableCell extends Component {
state = {
value: this.props.value,
editable: false,
}
handleChange = (e) => {
const value = e.target.value;
this.setState({
value,
});
}
check = () => {
this.setState({
editable: false,
});
if (this.props.onChange) {
this.props.onChange(this.state.value);
}
}
edit = () => {
this.setState({
editable: true,
});
}
render() {
const { value, editable } = this.state;
return (
{
editable ?
:
{value || ’ '}
}
);
}
}
@observer
class EditableTable extends Component {
constructor(props) {
super(props);
this.columns = [{
title: ‘name’,
dataIndex: ‘name’,
width: ‘30%’,
render: (text, record) => (
<EditableCell value={text} onChange={this.onCellChange(record.key, ‘name’)}/>
),
},
{
title: ‘age’,
dataIndex: ‘age’,
},
{
title: ‘address’,
dataIndex: ‘address’,
},
{
title: ‘operation’,
dataIndex: ‘operation’,
render: (text, record) => {
return (
this.state.dataSource.length > 1 ?
(
<Popconfirm title=“Sure to delete?” onConfirm={() => this.onDelete(record.key)}>
Delete
) : null
);
},
}];
this.state = {
dataSource: [{
key: ‘0’,
name: ‘Edward King 0’,
age: ‘32’,
address: ‘London, Park Lane no. 0’,
}, {
key: ‘1’,
name: ‘Edward King 1’,
age: ‘32’,
address: ‘London, Park Lane no. 1’,
}],
count: 2,
};
}
onCellChange = (key, dataIndex) => {
return (value) => {
const dataSource = […this.state.dataSource];
const target = dataSource.find(item => item.key === key);
if (target) {
target[dataIndex] = value;
this.setState({ dataSource });
}
};
}
onDelete = (key) => {
const dataSource = […this.state.dataSource];
this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
}
handleAdd = () => {
const { count, dataSource } = this.state;
const newData = {
key: count,
name: Edward King ${count}
,
age: 32,
address: London, Park Lane no. ${count}
,
};
this.setState({
dataSource: […dataSource, newData],
count: count + 1,
});
}
render() {
const { dataSource } = this.state;
const columns = this.columns;
return (
Add