Fixes react-toolbox#1452 (react-toolbox#1454)

* Fixes react-toolbox#1452

Avoid using .bind within the render method of components.

* Fixed JS comment into proper JSX comment

Author: Satyam

components/input/readme.md

@@ -9,18 +9,18 @@ import Input from 'react-toolbox/lib/input';
 class InputTest extends React.Component {
   state = { name: '', phone: '', email: '', hint: '' };
 
-  handleChange = (name, value) => {
-    this.setState({ [name]: value });
+  handleChange = (value, ev) => {
+    this.setState({ [ev.target.name]: value });
   };
 
   render () {
     return (
       <section>
-        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange} maxLength={16 } />
         <Input type='text' label='Disabled field' disabled />
-        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
-        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
-        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
+        <Input type='email' label='Email address' name='email' icon='email' value={this.state.email} onChange={this.handleChange} />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange} />
+        <Input type='text' label='Required Field' name='hint' hint='With Hint' required value={this.state.hint} onChange={this.handleChange} icon={<span>J</span>} />
       </section>
     );
   }

docs/app/components/layout/main/modules/examples/input_example_1.txt

@@ -1,20 +1,21 @@
 class InputTest extends React.Component {
   state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
 
-  handleChange = (name, value) => {
-    this.setState({...this.state, [name]: value});
+  handleChange = (value, ev) => {
+    this.setState({[ev.target.name]: value});
   };
 
   render () {
     return (
       <section>
-        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
-        <Input type='text' hint='With Hint, no label' name='name' value={this.state.label} onChange={this.handleChange.bind(this, 'label')} maxLength={16} />
+        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange} maxLength={16} />
+        <Input type='text' hint='With Hint, no label' name='label' value={this.state.label} onChange={this.handleChange} maxLength={16} />
         <Input type='text' label='Disabled field' disabled />
-        <Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} />
-        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
-        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
-        <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon='share' />
+        <Input type='text' multiline label='Multiline' name='multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange} />
+        <Input type='email' label='Email address' name='email' icon='email' value={this.state.email} onChange={this.handleChange} />
+        <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange} />
+        <Input type='text' name='hint' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange} icon='share' />
+        {/* Just an example. Defining functions in a property, such as onClick, is a bad idea: */}
         <Input type='text' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
       </section>
     );

spec/components/input.js

@@ -12,8 +12,8 @@ class InputTest extends React.Component {
     multilineRows: 'A\n\B\nC\nD\nE\nF',
   };
 
-  handleChange = (name, value) => {
-    this.setState({ ...this.state, [name]: value });
+  handleChange = (value, ev) => {
+    this.setState({[ev.target.name]: value });
   };
 
   render() {
@@ -23,18 +23,19 @@ class InputTest extends React.Component {
         <p>lorem ipsum...</p>
         <Input
           type="text"
+          name="normal"
           value={this.state.normal}
-          label="First Name" onChange={this.handleChange.bind(this, 'normal')}
+          label="First Name" onChange={this.handleChange}
           maxLength={12}
         />
-        <Input type="email" value={this.state.fixedLabel} label="Label fixed" floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
+        <Input type="email" name="fixedLabel" value={this.state.fixedLabel} label="Label fixed" floating={false} onChange={this.handleChange} />
         <Input type="text" value="Read only" readOnly label="Phone Number" />
-        <Input type="email" value={this.state.multilineHint} label="Description" hint="Enter Description" multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
-        <Input type="text" value={this.state.multilineRows} label="Row Limited Description" hint="Enter Description" multiline rows={4} onChange={this.handleChange.bind(this, 'multilineRows')} />
+        <Input type="email" name="multilineHint" multilineHint value={this.state.multilineHint} label="Description" hint="Enter Description" multiline onChange={this.handleChange} />
+        <Input type="text" name="multilineRows" value={this.state.multilineRows} label="Row Limited Description" hint="Enter Description" multiline rows={4} onChange={this.handleChange} />
         <Input type="text" label="Disabled field" disabled />
-        <Input type="tel" value={this.state.withIcon} required label="With icon" onChange={this.handleChange.bind(this, 'withIcon')} icon="phone" />
-        <Input type="tel" value={this.state.withCustomIcon} label="With custom icon" onChange={this.handleChange.bind(this, 'withCustomIcon')} icon="favorite" />
-        <Input type="text" value={this.state.withHintCustomIcon} label="With Hint Text Icon" hint="Hint Text" onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon="share" />
+        <Input type="tel" name="withIcon" value={this.state.withIcon} required label="With icon" onChange={this.handleChange} icon="phone" />
+        <Input type="tel" name="withCustomIcon" value={this.state.withCustomIcon} label="With custom icon" onChange={this.handleChange} icon="favorite" />
+        <Input type="text" name="withHintCustomIcon" value={this.state.withHintCustomIcon} label="With Hint Text Icon" hint="Hint Text" onChange={this.handleChange} icon="share" />
       </section>
     );
   }