Skip to content

Commit 80479fa

Browse files
Alexius-HuangAlexius-Huang
committed
Minor refactorization
1 parent 1792ace commit 80479fa

File tree

5 files changed

+27
-55
lines changed

5 files changed

+27
-55
lines changed

‎lib/components/App.jsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,6 @@ export default class ToDoList extends React.Component {
1818
DELETE_LIST_ITEM: 6
1919
}
2020
this.state = { listItems: [] }
21-
this.handleCreateListItem = this.handleCreateListItem.bind(this)
22-
this.handleCheckEvent = this.handleCheckEvent.bind(this)
23-
this.handleOpenModal = this.handleOpenModal.bind(this)
24-
this.handleEditContent = this.handleEditContent.bind(this)
25-
this.handleDeleteItem = this.handleDeleteItem.bind(this)
2621
}
2722

2823
componentDidMount() {
@@ -149,23 +144,23 @@ export default class ToDoList extends React.Component {
149144
<ListItem
150145
key={item.key} id={item.key} ref={`list-item-${item.key}`}
151146
checked={item.checked}
152-
checkEvent={this.handleCheckEvent}
153-
openModal={this.handleOpenModal}
154-
editContent={this.handleEditContent}
147+
checkEvent={this.handleCheckEvent.bind(this)}
148+
openModal={this.handleOpenModal.bind(this)}
149+
editContent={this.handleEditContent.bind(this)}
155150
>{item.content}</ListItem>
156151
)
157152

158153
return (
159154
<div className="to-do-app">
160155
<ListForm
161-
createListItem={this.handleCreateListItem}
156+
createListItem={this.handleCreateListItem.bind(this)}
162157
ref="form"
163158
/>
164159
<ListModal
165160
ref="modal"
166161
modalId={this.state.modal ? this.state.modal.id : 0}
167162
modalContent={this.state.modal ? this.state.modal.content : ''}
168-
confirmDelete={this.handleDeleteItem}
163+
confirmDelete={this.handleDeleteItem.bind(this)}
169164
/>
170165
<div className="list-group">
171166
{renderListItems}

‎lib/components/app/ListForm.jsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react'
33
export default class ListForm extends React.Component {
44
constructor(props) {
55
super(props)
6-
this.handleCreateListItemEvent = this.handleCreateListItemEvent.bind(this)
76
}
87

98
handleCreateListItemEvent(event) {
@@ -17,7 +16,7 @@ export default class ListForm extends React.Component {
1716
return (
1817
<div className="list-form">
1918
<input ref="item-content" id="item-content" />
20-
<button onClick={this.handleCreateListItemEvent}>
19+
<button onClick={this.handleCreateListItemEvent.bind(this)}>
2120
<img src="/icon/plus-sign-light.png" alt="plus-sign"/>
2221
</button>
2322
</div>

‎lib/components/app/ListItem.jsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ import React from 'react'
22
export default class ListItem extends React.Component {
33
constructor(props) {
44
super(props)
5-
this.handleItemCheck = this.handleItemCheck.bind(this)
6-
this.handleDeleteItemClick = this.handleDeleteItemClick.bind(this)
7-
this.handleEditContentChange = this.handleEditContentChange.bind(this)
8-
this.handleEditContent = this.handleEditContent.bind(this)
9-
this.handleHideEditForm = this.handleHideEditForm.bind(this)
105
this.state = { content: this.props.children }
116
}
127

@@ -50,7 +45,7 @@ export default class ListItem extends React.Component {
5045
id={labelCheckId}
5146
className="list-item-check"
5247
checked={this.props.checked}
53-
onChange={this.handleItemCheck}
48+
onChange={this.handleItemCheck.bind(this)}
5449
/>
5550

5651
<input
@@ -68,10 +63,10 @@ export default class ListItem extends React.Component {
6863
name="edit-content"
6964
id="edit-content"
7065
value={this.state.content}
71-
onChange={this.handleEditContentChange}
66+
onChange={this.handleEditContentChange.bind(this)}
7267
/>
73-
<button id="confirm" onClick={this.handleEditContent}>OK</button>
74-
<button id="cancel" onClick={this.handleHideEditForm}>Cancel</button>
68+
<button id="confirm" onClick={this.handleEditContent.bind(this)}>OK</button>
69+
<button id="cancel" onClick={this.handleHideEditForm.bind(this)}>Cancel</button>
7570
</span>
7671

7772
<div className="list-item-control">
@@ -89,7 +84,7 @@ export default class ListItem extends React.Component {
8984
</svg>
9085
</label>
9186

92-
<button id="delete-btn" onClick={this.handleDeleteItemClick}>
87+
<button id="delete-btn" onClick={this.handleDeleteItemClick.bind(this)}>
9388
<span></span>
9489
<span></span>
9590
</button>

‎lib/components/app/ListModal.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@ export default class ListModal extends React.Component {
44
constructor(props) {
55
super(props)
66
this.open = this.open.bind(this)
7-
this.handleConfirmDelete = this.handleConfirmDelete.bind(this)
8-
this.handleCloseModal = this.handleCloseModal.bind(this)
97
}
108

119
open() {
@@ -32,8 +30,8 @@ export default class ListModal extends React.Component {
3230
<p>You are going to delete the item</p>
3331
<h3>{this.props.modalContent}</h3>
3432
<div className="list-modal-btn-group">
35-
<button id="modal-confirm" onClick={this.handleConfirmDelete}>Yes</button>
36-
<button id="modal-cancel" onClick={this.handleCloseModal}>No</button>
33+
<button id="modal-confirm" onClick={this.handleConfirmDelete.bind(this)}>Yes</button>
34+
<button id="modal-cancel" onClick={this.handleCloseModal.bind(this)}>No</button>
3735
</div>
3836
</div>
3937
</div>

‎public/js/index.js

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -23225,11 +23225,6 @@ var ToDoList = function (_React$Component) {
2322523225
DELETE_LIST_ITEM: 6
2322623226
};
2322723227
_this.state = { listItems: [] };
23228-
_this.handleCreateListItem = _this.handleCreateListItem.bind(_this);
23229-
_this.handleCheckEvent = _this.handleCheckEvent.bind(_this);
23230-
_this.handleOpenModal = _this.handleOpenModal.bind(_this);
23231-
_this.handleEditContent = _this.handleEditContent.bind(_this);
23232-
_this.handleDeleteItem = _this.handleDeleteItem.bind(_this);
2323323228
return _this;
2323423229
}
2323523230

@@ -23379,9 +23374,9 @@ var ToDoList = function (_React$Component) {
2337923374
{
2338023375
key: item.key, id: item.key, ref: 'list-item-' + item.key,
2338123376
checked: item.checked,
23382-
checkEvent: _this4.handleCheckEvent,
23383-
openModal: _this4.handleOpenModal,
23384-
editContent: _this4.handleEditContent
23377+
checkEvent: _this4.handleCheckEvent.bind(_this4),
23378+
openModal: _this4.handleOpenModal.bind(_this4),
23379+
editContent: _this4.handleEditContent.bind(_this4)
2338523380
},
2338623381
item.content
2338723382
);
@@ -23391,14 +23386,14 @@ var ToDoList = function (_React$Component) {
2339123386
'div',
2339223387
{ className: 'to-do-app' },
2339323388
_react2.default.createElement(_ListForm2.default, {
23394-
createListItem: this.handleCreateListItem,
23389+
createListItem: this.handleCreateListItem.bind(this),
2339523390
ref: 'form'
2339623391
}),
2339723392
_react2.default.createElement(_ListModal2.default, {
2339823393
ref: 'modal',
2339923394
modalId: this.state.modal ? this.state.modal.id : 0,
2340023395
modalContent: this.state.modal ? this.state.modal.content : '',
23401-
confirmDelete: this.handleDeleteItem
23396+
confirmDelete: this.handleDeleteItem.bind(this)
2340223397
}),
2340323398
_react2.default.createElement(
2340423399
'div',
@@ -23447,11 +23442,6 @@ var ListItem = function (_React$Component) {
2344723442

2344823443
var _this = _possibleConstructorReturn(this, (ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call(this, props));
2344923444

23450-
_this.handleItemCheck = _this.handleItemCheck.bind(_this);
23451-
_this.handleDeleteItemClick = _this.handleDeleteItemClick.bind(_this);
23452-
_this.handleEditContentChange = _this.handleEditContentChange.bind(_this);
23453-
_this.handleEditContent = _this.handleEditContent.bind(_this);
23454-
_this.handleHideEditForm = _this.handleHideEditForm.bind(_this);
2345523445
_this.state = { content: _this.props.children };
2345623446
return _this;
2345723447
}
@@ -23505,7 +23495,7 @@ var ListItem = function (_React$Component) {
2350523495
id: labelCheckId,
2350623496
className: "list-item-check",
2350723497
checked: this.props.checked,
23508-
onChange: this.handleItemCheck
23498+
onChange: this.handleItemCheck.bind(this)
2350923499
}),
2351023500
_react2.default.createElement("input", {
2351123501
type: "checkbox",
@@ -23526,16 +23516,16 @@ var ListItem = function (_React$Component) {
2352623516
name: "edit-content",
2352723517
id: "edit-content",
2352823518
value: this.state.content,
23529-
onChange: this.handleEditContentChange
23519+
onChange: this.handleEditContentChange.bind(this)
2353023520
}),
2353123521
_react2.default.createElement(
2353223522
"button",
23533-
{ id: "confirm", onClick: this.handleEditContent },
23523+
{ id: "confirm", onClick: this.handleEditContent.bind(this) },
2353423524
"OK"
2353523525
),
2353623526
_react2.default.createElement(
2353723527
"button",
23538-
{ id: "cancel", onClick: this.handleHideEditForm },
23528+
{ id: "cancel", onClick: this.handleHideEditForm.bind(this) },
2353923529
"Cancel"
2354023530
)
2354123531
),
@@ -23566,7 +23556,7 @@ var ListItem = function (_React$Component) {
2356623556
),
2356723557
_react2.default.createElement(
2356823558
"button",
23569-
{ id: "delete-btn", onClick: this.handleDeleteItemClick },
23559+
{ id: "delete-btn", onClick: this.handleDeleteItemClick.bind(this) },
2357023560
_react2.default.createElement("span", null),
2357123561
_react2.default.createElement("span", null)
2357223562
)
@@ -23611,10 +23601,7 @@ var ListForm = function (_React$Component) {
2361123601
function ListForm(props) {
2361223602
_classCallCheck(this, ListForm);
2361323603

23614-
var _this = _possibleConstructorReturn(this, (ListForm.__proto__ || Object.getPrototypeOf(ListForm)).call(this, props));
23615-
23616-
_this.handleCreateListItemEvent = _this.handleCreateListItemEvent.bind(_this);
23617-
return _this;
23604+
return _possibleConstructorReturn(this, (ListForm.__proto__ || Object.getPrototypeOf(ListForm)).call(this, props));
2361823605
}
2361923606

2362023607
_createClass(ListForm, [{
@@ -23634,7 +23621,7 @@ var ListForm = function (_React$Component) {
2363423621
_react2.default.createElement('input', { ref: 'item-content', id: 'item-content' }),
2363523622
_react2.default.createElement(
2363623623
'button',
23637-
{ onClick: this.handleCreateListItemEvent },
23624+
{ onClick: this.handleCreateListItemEvent.bind(this) },
2363823625
_react2.default.createElement('img', { src: '/icon/plus-sign-light.png', alt: 'plus-sign' })
2363923626
)
2364023627
);
@@ -23680,8 +23667,6 @@ var ListModal = function (_React$Component) {
2368023667
var _this = _possibleConstructorReturn(this, (ListModal.__proto__ || Object.getPrototypeOf(ListModal)).call(this, props));
2368123668

2368223669
_this.open = _this.open.bind(_this);
23683-
_this.handleConfirmDelete = _this.handleConfirmDelete.bind(_this);
23684-
_this.handleCloseModal = _this.handleCloseModal.bind(_this);
2368523670
return _this;
2368623671
}
2368723672

@@ -23734,12 +23719,12 @@ var ListModal = function (_React$Component) {
2373423719
{ className: 'list-modal-btn-group' },
2373523720
_react2.default.createElement(
2373623721
'button',
23737-
{ id: 'modal-confirm', onClick: this.handleConfirmDelete },
23722+
{ id: 'modal-confirm', onClick: this.handleConfirmDelete.bind(this) },
2373823723
'Yes'
2373923724
),
2374023725
_react2.default.createElement(
2374123726
'button',
23742-
{ id: 'modal-cancel', onClick: this.handleCloseModal },
23727+
{ id: 'modal-cancel', onClick: this.handleCloseModal.bind(this) },
2374323728
'No'
2374423729
)
2374523730
)

0 commit comments

Comments
 (0)