1. Requirement function: The table can be dragged and dropped, and can be edited when clicked to edit. The first two are input boxes, and the back is a drop-down selection box, which can be added or deleted.
Below I will introduce two implementation methods
One,
-
When viewing
ant-designcomponents, you will find that drag and drop and editable tables are two types of tables. So my realization idea is to avoid the uncertain problem caused by the mixing of the two types of tables, so I directly introduce the two tables, and use variables to control which table is used in the area.
Render the drag table when I need to drag and drop, and render the edit table when I want to edit, using common data. -
The specific implementation code varies from person to person, here I only give some of the code that I think can help you
-
Distinguish whether it is an input box or a drop-down selection box when rendering the editing state
renderCell = ({
getFieldDecorator }) => {
const {
editing,
dataIndex,
title,
inputType,
record,
index,
children,
...restProps
} = this.props;
const len = dataIndex === 'courseName' ? 20 : 2;
return (
<td {
...restProps}>
{
editing ? (
<div>
{
inputType === 'select' ? (
<Select
mode="multiple"
allowClear
style={
{
width: '100%' }}
placeholder="请选择适用年级"
onChange={
this.handleChange}
defaultValue={
record.gradeEnumList}
>
{
constants.gradesData.map((item, inx) => {
return (
<OptGroup label={
item.label} key={
`${
inx * 3}`}>
{
item.children.map((item2, index2) => {
return (
<Option key={
DataUtils.generateKey(index2)} value={
item2.value}>
{
item2.grade}
</Option>
);
})}
</OptGroup>
);
})}
</Select>
) : (
<Form.Item style={
{
margin: 0 }}>
{
getFieldDecorator(dataIndex, {
rules: [
{
required: dataIndex === 'courseName', max: dataIndex === 'courseName' ? 20 : 2,
message: `${
title}限${
len}字内!`,
},
],
initialValue: record[dataIndex],
})
(this.getInput())}
</Form.Item>
)}
</div>
) : (
children
)}
</td>
);
};
需要注意的是：下拉选择框的默认值一定要对应value值的数据类型，需要匹配。
two,
- In the same component, use variables to control
renderthe content of the table - Example
render: (text, record) => {
return (
<div>
{
editCourseId === record.courseId && editCourseId !== '' ? (
<CustomSelected onRef={
(ref) => {
this.child = ref; }} value={
record.gradeEnumList} courseId={
editCourseId} />
) : text}
</div>
)
}
render: (text, record) => {
return (
<div>
{
editCourseId === record.courseId && editCourseId !== '' ? (
<CustomInput value={
record.courseShortName} max={
2} ref={
this.editShortName} />
) : text}
</div>
)
}
- The above components were used to communicate
onRef,ref. Regarding the usage of the two, you can search by yourself. - 1. In summary, onRef is a function method used to call subcomponents
- This is the example I used in this case
父组件-----------------
使用
传入方式在上面渲染的地方代码
在需要调用的地方进行调用子组件的方法
const gradeEnumList = this.child.getValue();
子组件-----------------
componentDidMount() {
const {
onRef } = this.props;
if (onRef) {
onRef(this);
}
}
getValue = () => {
const {
value } = this.state;
return value;
}
- 2. React.createRef() : Used to get the value of the child component, and the modified value of the child component can be obtained in the parent component.
父组件--------------
this.editCourseName = React.createRef();
this.editShortName = React.createRef();
this.editGradeEnum = React.createRef();
引入方式如上面渲染代码所示
父组件访问使用
const shortName = this.editShortName.current.state.value;
const name = this.editCourseName.current.state.value;
子组件--------------------------
按自己正常的业务代码
如--
import React, {
Component } from 'react';
import {
Input } from 'antd';
class CustomInput extends Component{
constructor(props) {
super(props);
this.state = {
value: props.value,
}
}
onChange = (e) => {
this.setState({
value: e.target.value,
});
}
render() {
const {
value } = this.state;
const {
max } = this.props;
return <Input value={
value} placeholder="请输入" onChange={
this.onChange} maxLength={
max} />
}
}
export default CustomInput;
You must learn the details of the communication methods of the above components by yourself. I am just sharing some code snippets here, my way of implementation.
