* Fixes #1452 Avoid using .bind within the render method of components. * Fixed JS comment into proper JSX commentold
parent
f90958d53c
commit
9619d85916
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue