TableHead.js
3.2 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
110
import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';
import cx from 'classnames';
import s from './header.scss';
class TableHead extends React.Component {
constructor(props) {
super(props);
this.changeInput=this.changeInput.bind(this);
this.showInput=this.showInput.bind(this);
this.hideInput=this.hideInput.bind(this);
this.state={
value:'',
showInput:false,
columnNames:[]
}
}
static propTypes = {
onChange:PropTypes.func
}
static defaultProps={
onChange:()=>{
}
}
changeInput(e){
this.setState({
value:e.target.value
})
}
showInput(){
this.setState({
showInput:true
})
}
hideInput(){
const {columnNames,value}=this.state;
const {onChange}=this.props;
if(!value){
return ;
}
columnNames.push(value);
this.setState({
showInput:false,
columnNames,
value:''
})
onChange(columnNames);
}
removeColumnByIndex(index){
const {columnNames}=this.state;
const {onChange}=this.props;
columnNames.splice(index,1)
this.setState({
columnNames
})
onChange(columnNames); //调用删除的方法，重新渲染state
}
componentDidMount(){
const {columnNames}=this.props;
this.setState({
columnNames
})
}
componentWillReceiveProps(nextProps){
const {columnNames}=nextProps;
this.setState({
columnNames
})
}
componentDidUpdate(prevProps,prevState){
}
componentWillUnmount() {
}
render(){
const {showInput,columnNames}=this.state,self=this;
return (
<div className={cx(s.custom_header_wrap)} >
<div>
{columnNames.map((columnName,i)=>{
return (
<div key={i} className={cx(s.column_name_wrap)}>
<div className={cx(s.remove_column_wrap)} onClick={self.removeColumnByIndex.bind(self,i)}><i className='kr_icon'></i></div>
<div className={cx(s.column_name_item)}>{columnName}</div>
</div>
)
})}
</div>
<div className={cx(s.add_custom_wrap)}>
<div className={cx(s.column_wrap)}>
{showInput&&<input type="text"
value={this.state.value}
placeholder="请出入列名称"
onChange={this.changeInput}
></input>}
{!showInput&&<span className={cx("kr_icon",s.input_group_addon)} onClick={this.showInput}></span>}
{showInput&&<span className={cx("kr_icon",s.input_group_addon)} onClick={this.hideInput}></span>}
</div>
</div>
</div>
)
}
}
export default TableHead;