1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { PureComponent } from 'react';
import { Input, Icon } from 'antd';
import styles from './index.less';
export default class EditableItem extends PureComponent {
constructor(props) {
super(props);
this.state = {
value: props.value,
editable: false,
};
}
handleChange = e => {
const { value } = e.target;
this.setState({ value });
};
check = () => {
this.setState({ editable: false });
const { value } = this.state;
const { onChange } = this.props;
if (onChange) {
onChange(value);
}
};
edit = () => {
this.setState({ editable: true });
};
render() {
const { value, editable } = this.state;
return (
<div className={styles.editableItem}>
{editable ? (
<div className={styles.wrapper}>
<Input value={value} onChange={this.handleChange} onPressEnter={this.check} />
<Icon type="check" className={styles.icon} onClick={this.check} />
</div>
) : (
<div className={styles.wrapper}>
<span>{value || ' '}</span>
<Icon type="edit" className={styles.icon} onClick={this.edit} />
</div>
)}
</div>
);
}
}