接着上面问题，太多，不够放，

Question

class EditableCell extends React.Component {
getInput = () => {
if (this.props.inputType === 'number') {
return <InputNumber />;
}
return <Input />;
};

render() {
const {
editing,
dataIndex,
title,
inputType,
record,
index,
...restProps
} = this.props;
return (
<EditableContext.Consumer>
{(form) => {
const { getFieldDecorator } = form;
return (
<td {...restProps}>
{editing ? (
<FormItem style={{ margin: 0 }}>
{getFieldDecorator(dataIndex, {
rules: [{
required: true,
message: `请输入 ${title}!`,
}],
initialValue: record[dataIndex],
})(this.getInput())}
</FormItem>
) : restProps.children}
</td>
);
}}
</EditableContext.Consumer>
);
}
}

class EditableTable extends React.Component {
constructor(props) {
super(props);
this.state = { data, editingKey: '' };
this.columns = [
{
title: '期数',
dataIndex: 'installment',
width: '25%',
editable: true,
},
{
title: '利率',
dataIndex: 'interestRate',
width: '25%',
editable: true,
},
{
title: '操作',
dataIndex: 'operation',
render: (text, record) => {
const editable = this.isEditing(record);
return (
<div>
{editable ? (
<span>
<EditableContext.Consumer>
{form => (
<a
href="javascript:;"
onClick={() => this.save(form, record.key)}
style={{ marginRight: 8 }}
>
保存
</a>
)}
</EditableContext.Consumer>
<Popconfirm
title="确定取消?"
onConfirm={() => this.cancel(record.key)}
>
<a>取消</a>
</Popconfirm>
</span>
) : (
<div>
<a onClick={() => this.edit(record.key)}>编辑</a>
<Divider type="vertical" />
<Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.key)}>
<a href="javascript:;">Delete</a>
</Popconfirm>
</div>

)}
</div>
);
},
},
];
}

isEditing = (record) => {
return record.key === this.state.editingKey;
};

edit(key) {
this.setState({ editingKey: key });
}

onDelete = (key) => {
const newData = [...this.state.newData];
this.setState({ data: newData, editingKey: '' });
}

save(form, key) {
form.validateFields((error, row) => {
if (error) {
return;
}
const newData = [...this.state.data];
const index = newData.findIndex(item => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
this.setState({ data: newData, editingKey: '' });
} else {
newData.push(data);
this.setState({ data: newData, editingKey: '' });
}
});
}

cancel = () => {
this.setState({ editingKey: '' });
};

render() {
const components = {
body: {
row: EditableFormRow,
cell: EditableCell,
},
};

const columns = this.columns.map((col) => {
console.log(col,5555555)
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
inputType: 'number',
dataIndex: col.dataIndex,
title: col.title,
editing: this.isEditing(record),
}),
};
});

return (
<Table
components={components}
dataSource={this.state.data}
columns={columns}
style={{width:'50%'}}
rowClassName="editable-row"
onRow={(record, index) => {
console.log(record,index)
}}
/>
);
}
}

const AddProducts = Form.create()(AddProduct);
export default AddProducts;

Answer 1

Parry 2018-07-15 00:10:16

？？？多个 form 提交的问题？

• 提问者 苹果123 #1

  就是[
  {a:1,b:2},
  {a:11,b:27},
  {a:61,b:24},
  {a:81,b:28},
  {...rest}
  ],
  最终不管是checkbook,haisselect还是input,radio，修改或者新建，提交保存时最终是这样吗，老师，怎么这react dom，怎么模拟呢？多个form，还是一个form里，1⃣️=>多个form Item,一个form Item里?️两个或者多个select
  2️⃣多个form,一个form里有多个fotmItem,一个form Item里?️两个或者多个select
  应该正确的是？
  3️⃣穿梭的东西