JavaScript-Demos/demos/bind-args-code-smell-reactjs/bind.htm at master · gregorycode/JavaScript-Demos · GitHub

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />

	<title>
		Is Using .bind() To Lock-In Arguments A "Code Smell" In ReactJS
	</title>

	<link rel="stylesheet" type="text/css" href="./demo.css"></link>
</head>
<body>

	<h1>
		Is Using .bind() To Lock-In Arguments A "Code Smell" In ReactJS
	</h1>

	<p>
		<strong>Current Approach</strong>: Using <em>.bind( this, friend.id )</em>.
	</p>

	<div id="content">
		<!-- This content will be replaced with the React rendering. -->
	</div>


	<!-- Load scripts. -->
	<script src="../../vendor/reactjs/react-0.13.3.js"></script>
	<script src="../../vendor/reactjs/JSXTransformer-0.13.3.js"></script>
	<script src="../../vendor/lodash/lodash-3.9.3.js"></script>
	<script type="text/jsx">

		// I manage the Demo widget.
		var Demo = React.createClass({

			// I return the initial state (and setup instance properties) for the component.
			getInitialState: function() {

				return({
					friends: [
						{
							id: 1,
							name: "Joanna",
							clickCount: 0
						},
						{
							id: 2,
							name: "Sarah",
							clickCount: 0
						},
						{
							id: 3,
							name: "Kim",
							clickCount: 0
						}
					]
				});

			},


			// ---
			// PUBLIC METHODS.
			// ---


			// I handle the click-event for a friend.
			// --
			// CAUTION: While this is an event-handler, the "event" argument is not the
			// first argument because this method was bound using .bind() such that the
			// friend ID could be "locked-in" at render time.
			handleClick: function( friendID, event ) {

				// Clone the data to make sure we aren't mutating values in-place.
				var friends = _.clone( this.state.friends, true );

				var friend = _.find(
					friends,
					{
						id: friendID
					}
				);

				friend.clickCount++;

				this.setState({
					friends: friends
				});

			},


			// I return the virtual DOM based on the current state.
			render: function() {

				// Map the friends collection onto a virtual DOM collection.
				// --
				// NOTE: When we wire-up the onClick handler, notice that we are using
				// the .bind() method to lock-in the "friend.id" as an argument to the
				// click handler.
				var friendsBlock = this.state.friends.map(
					function operator( friend ) {

						return(
							<li key={ friend.id }>

								<a onClick={ this.handleClick.bind( this, friend.id ) }>
									{ friend.name } ( { friend.clickCount } )
								</a>

							</li>
						);

					},
					this
				);

				return(
					<div>
						<h2>
							You have { this.state.friends.length } friends!
						</h2>

						<ul>
							{ friendsBlock }
						</ul>
					</div>
				);

			}

		});


		// --------------------------------------------------------------------------- //
		// --------------------------------------------------------------------------- //


		// Render the root Demo and mount it inside the given element.
		React.render( <Demo />, document.getElementById( "content" ) );

	</script>

</body>
</html>