45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import { Form } from 'formsy-react';
|
|
|
|
import MyInput from './../components/Input';
|
|
import MySelect from './../components/Select';
|
|
|
|
const user = {
|
|
name: 'Sam',
|
|
free: true,
|
|
hair: 'brown'
|
|
};
|
|
|
|
const App = React.createClass({
|
|
submit(data) {
|
|
alert(JSON.stringify(data, null, 4));
|
|
},
|
|
resetForm() {
|
|
this.refs.form.reset();
|
|
},
|
|
render() {
|
|
return (
|
|
<Formsy.Form ref="form" onSubmit={this.submit} className="form">
|
|
<MyInput name="name" title="Name" value={user.name} />
|
|
<MyInput name="free" title="Free to hire" type="checkbox" value={user.free} />
|
|
<MySelect name="hair" title="Hair" value={user.hair}
|
|
options={[
|
|
{ value: "black", title: "Black" },
|
|
{ value: "brown", title: "Brown" },
|
|
{ value: "blonde", title: "Blonde" },
|
|
{ value: "red", title: "Red" }
|
|
]}
|
|
/>
|
|
|
|
<div className="buttons">
|
|
<button type="reset" onClick={this.resetForm}>Reset</button>
|
|
<button type="submit">Submit</button>
|
|
</div>
|
|
</Formsy.Form>
|
|
);
|
|
}
|
|
});
|
|
|
|
ReactDOM.render(<App/>, document.getElementById('example'));
|