Ant Design会自动回到表格前面 ant design 表格编辑

1、 需求功能：表格可进行拖拽，点击编辑的时候可进行编辑，前两个是input输入框，后面是下拉选择框，可增加可删除。

下面我将介绍两种实现方法

一、

• 查看ant-design组件的时候，会发现拖拽和可编辑表格是两种类型表格。所以我的实现思路是，为了避免两种类型表格杂在一起带来的不确定问题，所以直接引入两种表格，通过变量去控制区使用哪种表格。
  当我需要拖拽的时候渲染拖拽表格，当我要编辑的时候渲染编辑表格，使用共同的数据即可。
• 具体实现代码因人而异，这里我只给出部分觉得可以帮助大家的代码
• 区分渲染编辑状态时是输入框还是下拉选择框

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值的数据类型，需要匹配。

二、首推这种方法

• 在同一组件中，使用变量去控制表格render的内容
• 示例

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>
          )
        }

• 上面分别使用到组件通信的onRef 、ref。 关于两个的用法，大家可以自行搜索。
• 1、总结来说，onRef就是用来调用子组件的函数方法
• 这是我本次案例所使用的示例

父组件-----------------
使用
传入方式在上面渲染的地方代码
在需要调用的地方进行调用子组件的方法
 const gradeEnumList = this.child.getValue();
子组件-----------------
  componentDidMount() {
    const { onRef } = this.props;
    if (onRef) {
      onRef(this);
    }
  }

  getValue = () => {
    const { value } = this.state;
    return value;
  }

• 2、React.createRef()：用来获取子组件的值，子组件进行修改变化的值在父组件中能够得到。

父组件--------------
 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;

关于以上组件通信方式细节大家一定要自行学习，我这里只是分享一些代码片段，我的实现方式而已。