Table hover edit

table-hover-edit.js

import { Table, Icon, Popover, Input } from 'antd';

class EditableTable extends React.Component {
  constructor(props) {
    super(props);

    this.columns = [{
      title: '应用名称',
      dataIndex: 'appName',
      key: 'appName',
      render: (name, record, index) => {
        const content = <Input defaultValue={name} onBlur={e => {this.handleBlur(record, e.target.value);}} />;
        return (
          <div>
            <span className="app-name">
              {name}
            </span>
            <Popover content={content} title="标题" trigger="click" visible={record.editing} onVisibleChange={value => {this.handleVisibleChange(index, value);}}>
              <Icon type="edit" className={record.editing ? 'app-name-edit' : 'app-name-normal'} />
            </Popover>
          </div>
        );
      },
    }, {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
    }, {
      title: '详情',
      dataIndex: 'detail',
      key: 'detail',
    }, {
      title: '操作',
      key: 'operation',
      render: (name, record) => <a onClick={() => {this.handleOperation(record);}}>
        操作
      </a>,
    }];

    this.state = {
      data: props.dataSource.map(datum => {
        datum.editing = false;
        return datum;
      }),
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.dataSource !== this.props.dataSource) {
      this.setState({
        data: nextProps.dataSource.map(datum => {
          datum.editing = false;
          return datum;
        }),
      });
    }
  }

  handleBlur(record, value) {
    console.log(value);
    const { data } = this.state;
    const index = data.indexOf(record);
    const newDate = [...data];
    newDate[index] = {
      ...record,
      appName: value,
    };
    if (this.props.onChange) {
      this.props.onChange(newDate, record, value);
    }
  }

  handleVisibleChange(index, value) {
    console.log(index, value);
    const data = [...this.state.data];
    data[index] = { ...data[index], editing: value };
    this.setState({ data });
  }

  handleOperation(record) {
    console.log(record);
  }

  render() {
    const { data } = this.state;
    return <Table columns={this.columns} pagination={false} bordered dataSource={data} />;
  }
}


class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);

    const dataSource = [];
    for (let i = 0; i < 100; i++) {
      dataSource.push({
        appName: '应用名称00' + i,
        creator: '林外',
        detail: '这个一个描述描述描述描述描述1',
        key: i,
      });
    }
    this.state = { dataSource };
  }

  handleChange(dataSource) {
    this.setState({ dataSource });
  }

  render() {
    return <EditableTable dataSource={this.state.dataSource} onChange={this.handleChange} />;
  }
}

ReactDOM.render(<App />, mountNode);