ShowTablEdit.js
3.14 KB
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* eslint-disable no-trailing-spaces */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Input } from 'antd-v4';
import styles from '../../index.less';
const FormItem = Form.Item;
class ShowTableEditComponent extends Component {
constructor(props) {
super(props);
this.state = {
value: this.props.value,
gdsformconst: this.props.gdsformconst,
editable: this.props.editable || false,
must: this.props.must,
};
}
componentWillReceiveProps(nextProps) {
const { value, must } = nextProps;
if (value !== '') {
this.setState({ value, must });
}
if (nextProps.editable !== this.state.editable) {
this.setState({ editable: nextProps.editable });
if (nextProps.editable) {
this.cacheValue = this.state.value;
}
}
if (nextProps.status && nextProps.status !== this.props.status) {
if (nextProps.status === 'save') {
this.props.onChange(this.state.value);
} else if (nextProps.status === 'cancel') {
this.setState({ value: this.cacheValue, validateStatus: 'success', errorMsg: null });
this.props.onChange(this.cacheValue);
}
}
}
shouldComponentUpdate(nextProps, nextState) {
if (nextState.value !== nextProps.value) return true;
return nextProps.editable !== this.state.editable ||
nextState.value !== this.state.value;
}
handlevalidate = (value) => {
if (value !== '') {
return {
validateStatus: 'success',
errorMsg: null,
};
}
const textName = this.state.gdsformconst.filter(item => (item.sName === 'required'))[0].showName;
return {
validateStatus: 'error',
errorMsg: textName,
};
};
handleChange(e) {
const { value } = e.target;
this.setState({ value });
// if (this.props.must === false) {
// return;
// }
this.setState({
validateStatus: this.handlevalidate(value).validateStatus,
errorMsg: this.handlevalidate(value).errorMsg,
});
this.props.onChange(value);
}
render() {
const { editable, value, must } = this.state;
const textName = this.state.gdsformconst.filter(item => (item.sName === 'required'))[0].showName;
return (
<div>
{
editable ?
<div>
<FormItem
validateStatus={this.state.validateStatus}
help={this.state.errorMsg}
className={styles.editInput}
>
{
must ?
<Input
placeholder={textName}
onChange={e => this.handleChange(e)}
value={value}
/>
:
<Input
onChange={e => this.handleChange(e)}
value={value}
/>
}
</FormItem>
</div>
:
<div className={styles.editSpan}>
<span>{value}</span>
</div>
}
</div>
);
}
}
export default ShowTableEditComponent;