Javascript/React.js

ReactJS - 컴포넌트 이용한 게시판

Back 2018. 12. 1. 11:32





component/BoardList.js

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import React, { Component ,Fragment } from 'react'
import classNames  from 'classnames';
import Board from '../styles/board.scss';
import BoardDetil from './BoardDetil';
import Collapsible from 'react-collapsible';
 
const scss = classNames.bind(Board);
export default class BoardList extends Component {
    
    constructor(){
        super();
        this.state = {
            names:[
                {name:'홍길동', checked:false,index:0},
                {name:'AA', checked:false,index:1},
            ],
            name:'',
            checkCnt:0,
            nameChangeEvt : this.nameChangeEvt,
         }
    }
    
    addNamesEvt = () => {
        const {name} = this.state;
        if(name.length !== 0 ){
            this.setState({
                names:this.state.names.concat({
                      name:name
                    , checked:false 
                    , index:this.state.names.length
                }),
                name:''
            });
        }
    }
 
    inputTextChange = (e) =>{
        this.setState({
            name : e.target.value
        });
    }
 
    onCheckedEvt = (e) => {
        let {checkCnt} = this.state;
        const {checked} = e.target;
        this.setState({
            checkCnt: checked ? ++checkCnt : --checkCnt ,
            names:this.state.names.map((key,index)=> 
                ({    name:key.name
                    , checked: index === parseInt(e.target.value) ? checked : key.checked  
                    , index :index
                })
            )
        });
    }
 
    removeList = () =>{
        this.setState({
            checkCnt: 0 ,
            names: this.state.names.filter((item,i) =>  
                    item.checked ? false : true
            ) 
        });
    }
 
    allSelect =(e) =>{
        let {checked} = e.target;
        this.setState({
            checkCnt: checked ? this.state.names.length : 0,
            names:this.state.names.map((key,i) => 
                ({    name:key.name
                    , checked:  checked
                    , index : i  
                })
            )
        });
    }
 
    nameChangeEvt = (index,reName) =>{
        this.setState({
            names:this.state.names.map((key,i)=> 
                ({ name: i === index ? reName : key.name
                  , checked: key.checked  
                  , index : i
                })
            )
        });
    }
    render() {
        const nameList = this.state.names.map(
            (key,index)=>(
                 <li>
                    <input 
                        key={index} 
                        className={scss('big_checkbox')} 
                        value={index} 
                        type='checkbox' 
                        checked={key.checked} 
                        onChange={this.onCheckedEvt} />
                    <div className={scss('board_name')} >
                        <Collapsible trigger={key.name}>
                             <BoardDetil names={this.state.names} index={key.index}  nameChangeEvt={this.state.nameChangeEvt} />
                        </Collapsible>
                    </div>
                </li>
            )
        );
 
        return (
            <Fragment>
              <div className={scss('magin_center')}>
                <input type="text" onChange={this.inputTextChange}  value={this.state.name}/>
                <input type="button" value="추가" onClick={this.addNamesEvt}/>
              </div>
              <p>Checked Count : {this.state.checkCnt}</p>
              <div>
                <span>전체 선택</span>
                <input type="checkbox" className={scss('big_checkbox')} onChange={this.allSelect} />
              </div>
              <ul>
                 {nameList} 
              </ul>
              <div className={scss('button_center')}>
                <button onClick={ this.removeList }> 삭제 </button>
              </div>
            </Fragment>
        )   
    }
}
 
cs





component/BoardDetil.js

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
import React, { Component ,Fragment } from 'react'
 
export default class BoardDetil extends Component {
 
  constructor(props){
    super(props);
    this.state={
      updateName:''
    }
  }
 
  handleChange = (e)=>{
    this.setState({
      updateName : e.target.value
    });
  }
 
  nameChangeEvt=(index)=>{
    this.props.nameChangeEvt(index,this.state.updateName);
  }
 
  render() {
    const {index,names} = this.props;
    
    return (
      <Fragment>
         <span>{names[index].name}</span> 입니다.<br/><br/> 
         <input type="text" value={this.state.updateName} onChange={this.handleChange}/>
         <button onClick={() => {this.nameChangeEvt(index)}}> 수정 </button>
        <br/><br/>
      </Fragment>
    )
  }
}
 
cs


저작자표시 비영리 (새창열림)