반응형
삭제는
1. ContactDetails컴포넌트에서 삭제버튼을 추가하고 onRemove(props) 이벤트를 추가하는 것과
2. Contact 컴포넌트에서 handleRemove 함수를 선언하고 onRemove이벤트에 연결하는 것
이 필요합니다.
ContactDetails.js
import React, { Component } from 'react';
class ContactDetails extends Component {
render() {
const details = (
<div>
<p>{this.props.contact.name}</p>
<p>{this.props.contact.phone}</p>
</div>
);
const blank = (<div>Not Selected</div>)
return (
<div>
<h2>Details</h2>
{this.props.isSelected ? details : blank}
<button onClick={this.props.onRemove}>Remove</button> {/* 삭제 버튼 추가, onRemove이벤트 추가 */}
</div>
);
}
}
ContactDetails.defaultProps = {
contact: {
name: '',
phone: ''
},
onRemove: () => { console.error('onRemove not defined'); }
}
export default ContactDetails;
Contact.js
import React, { Component } from 'react';
import ContactInfo from './ContactInfo';
import ContactDetails from './ContactDetails';
import ContactCreate from './ContactCreate';
class Contact extends Component {
constructor(props) {
super(props);
this.state = {
selectedKey: -1,
keyword: '',
contactData: [{
name: 'Abet',
phone: '010-000-0001'
}, {
name: 'Betty',
phone: '010-000-0002'
}, {
name: 'Charlie',
phone: '010-000-0003'
}, {
name: 'David',
phone: '010-000-0004'
}]
}
this.handleChange = this.handleChange.bind(this);
this.handleClick = this.handleClick.bind(this);
this.handleCreate = this.handleCreate.bind(this);
this.handleRemove = this.handleRemove.bind(this);
}
handleChange(e) {
this.setState({
keyword: e.target.value
})
}
handleClick(key) {
this.setState({
selectedKey: key
})
}
handleCreate(contact) {
var newContact = Array.from(this.state.contactData);
newContact.push(contact);
this.setState({
contactData: newContact
});
}
handleRemove() { // onRemove이벤트와 연결할 함수 선언
if (this.state.selectedKey < 0) { // 아무 키가 선택되지 않았을 때에는 그냥 return
return;
}
var newContact = Array.from(this.state.contactData); // contactData 복제
newContact.splice(this.state.selectedKey, 1); // 복제 배열에서 selectedKey로부터 1개의 요소 삭제
this.setState({
contactData: newContact, // 수정된 복제배열을 새로운 state로 넘김
selectedKey: -1 // selectedKey를 다시 -1로 원복시킴
});
}
render() {
const mapToComponents = (data) => {
data = data.filter((contact) => {
return contact.name.toLowerCase().indexOf(this.state.keyword.toLowerCase()) > -1;
})
return data.map((contact, i) => {
return (<ContactInfo
contact={contact}
key={i}
onClick={() => this.handleClick(i)}
/>);
})
}
return (
<div>
<h1>Contacts</h1>
<input
name="keyword"
placeholder="Search"
value={this.state.keyword}
onChange={this.handleChange}
/>
<div>{mapToComponents(this.state.contactData)}</div>
<ContactDetails
isSelected={this.state.selectedKey != -1}
contact={this.state.contactData[this.state.selectedKey]}
onRemove={this.handleRemove} {/* onRemove이벤트에 함수 연결*/}
/>
<ContactCreate
onCreate={this.handleCreate}
/>
</div>
);
}
}
export default Contact;
반응형
'Programming > React' 카테고리의 다른 글
| React강좌2, 전화번호부 - 6.LocalStorage에 저장하기 (0) | 2020.08.03 |
|---|---|
| React강좌2, 전화번호부 - 5.Update 기능 (0) | 2020.08.03 |
| React강좌2, 전화번호부 - 3.Create 기능 (0) | 2020.08.03 |
| React강좌2, 전화번호부 - 2.Detail 보기 기능 (0) | 2020.08.01 |
| React강좌2, 전화번호부 - 1.Search기능 (0) | 2020.08.01 |
