vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Fixes #1452 (#1454) 

* Fixes #1452

Avoid using .bind within the render method of components.

* Fixed JS comment into proper JSX comment
old
Daniel Barreiro 2017-05-22 18:28:16 +02:00 committed by Javi Velasco
parent f90958d53c
commit 9619d85916
3 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/input/readme.md
View File

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

17
docs/app/components/layout/main/modules/examples/input_example_1.txt
View File

@ -1,20 +1,21 @@
class InputTest extends React.Component { class InputTest extends React.Component {
state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' }; state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
handleChange = (name, value) => { handleChange = (value, ev) => {
this.setState({...this.state, [name]: value}); this.setState({[ev.target.name]: value});
}; };
render () { render () {
return ( return (
<section> <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' hint='With Hint, no label' name='name' value={this.state.label} onChange={this.handleChange.bind(this, 'label')} 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' label='Disabled field' disabled />
<Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} /> <Input type='text' multiline label='Multiline' name='multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange} />
<Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} /> <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.bind(this, 'phone')} /> <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange} />
<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' 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>} /> <Input type='text' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
</section> </section>
); );

19
spec/components/input.js
View File

@ -12,8 +12,8 @@ class InputTest extends React.Component {
multilineRows: 'A\n\B\nC\nD\nE\nF', multilineRows: 'A\n\B\nC\nD\nE\nF',
}; };
handleChange = (name, value) => { handleChange = (value, ev) => {
this.setState({ ...this.state, [name]: value }); this.setState({[ev.target.name]: value });
}; };
render() { render() {
@ -23,18 +23,19 @@ class InputTest extends React.Component {
<p>lorem ipsum...</p> <p>lorem ipsum...</p>
<Input <Input
type="text" type="text"
name="normal"
value={this.state.normal} value={this.state.normal}
label="First Name" onChange={this.handleChange.bind(this, 'normal')} label="First Name" onChange={this.handleChange}
maxLength={12} 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="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="email" name="multilineHint" multilineHint value={this.state.multilineHint} label="Description" hint="Enter Description" multiline onChange={this.handleChange} />
<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="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="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" name="withIcon" value={this.state.withIcon} required label="With icon" onChange={this.handleChange} icon="phone" />
<Input type="tel" value={this.state.withCustomIcon} label="With custom icon" onChange={this.handleChange.bind(this, 'withCustomIcon')} icon="favorite" /> <Input type="tel" name="withCustomIcon" value={this.state.withCustomIcon} label="With custom icon" onChange={this.handleChange} 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="text" name="withHintCustomIcon" value={this.state.withHintCustomIcon} label="With Hint Text Icon" hint="Hint Text" onChange={this.handleChange} icon="share" />
</section> </section>
); );
} }