react-toolbox/docs/app/components/layout/main/modules/examples/input_example_1.txt

25 lines
1.4 KiB
Plaintext
Raw Normal View History

2015-11-08 01:38:26 +03:00
class InputTest extends React.Component {
state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
2015-11-08 01:38:26 +03:00
2015-12-03 02:51:43 +03:00
handleChange = (name, value) => {
this.setState({...this.state, [name]: value});
2015-11-08 01:38:26 +03:00
};
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} />
2015-11-08 01:38:26 +03:00
<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')} />
2016-08-07 22:13:58 +03:00
<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' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
2015-11-08 01:38:26 +03:00
</section>
);
}
}
2015-11-01 10:41:40 +03:00
return <InputTest />;