26 lines
1.5 KiB
Plaintext
26 lines
1.5 KiB
Plaintext
class InputTest extends React.Component {
|
|
state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '', error: '' };
|
|
|
|
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} 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' 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' value={this.state.error} name="error" onChange={this.handleChange.bind(this, 'error')} label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
return <InputTest />;
|