Skip to content

Instantly share code, notes, and snippets.

@RyanAtViceSoftware
Last active June 14, 2016 12:39
Show Gist options
  • Save RyanAtViceSoftware/e0d4f1ddf19c7050ba70 to your computer and use it in GitHub Desktop.
Save RyanAtViceSoftware/e0d4f1ddf19c7050ba70 to your computer and use it in GitHub Desktop.
Hello React - forms - data driven form using controlled components. JsFiddle: http://jsfiddle.net/gh/gist/library/pure/e0d4f1ddf19c7050ba70
button {
margin-left: 5px;
}
input {
margin: 5px;
}
form {
padding-right: 10px;
}
}
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="view"/>
var TextBox = React.createClass({
render: function() {
return (
<input className='form-control'
name={this.props.name}
type='text'
value={this.props.value}
onChange={this.props.onChange}/>
);
}
});
var ExampleForm = React.createClass({
getInitialState: function () {
return { form: { firstName: 'Ryan', lastName: 'Vice'} }
},
onChange: function(event) {
this.state.form[event.target.name] = event.target.value;
this.setState({form: this.state.form});
},
onSubmit: function(event) {
event.preventDefault();
alert('Form submitted. firstName: ' +
this.state.form.firstName +
', lastName: ' +
this.state.form.lastName);
},
render: function() {
var self = this;
return (
<form onSubmit={this.onSubmit}>
{Object.keys(this.state.form).map(
function(key) {
return (
<TextBox name={key}
value={self.state.form[key]}
onChange={self.onChange}/>
)
})
}
<button className='btn btn-success' type='submit'>Submit</button>
</form>
);
}
});
ReactDOM.render(
<ExampleForm/>,
document.getElementById('view'));
name: ReactJs example by Ryan Vice - www.ViceSoftware.com
description: Hello React - forms - data driven form using controlled components.
authors:
- Ryan Vice
resources:
- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
normalize_css: no
wrap: h
panel_js: 3
panel_css: 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment