ReactJs controlled component simple form
Hello React - controlled components - read and write.
author(s):
Ryan Vice
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<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"/>
CSS
div {
padding-right: 5px;
}
input {
margin: 5px;
}
Babel + JSX
var ExampleForm = React.createClass({
getInitialState: function() {
return { message: 'Read and write' }
},
getDefaultProps: function () {
return { message: 'Read only' }
},
onChange: function(event) {
this.setState({message: e.target.value});
},
render: function() {
return (
<div>
<input className='form-control' type='text'
value={this.props.message}/>
<input className="form-control" type='text'
value={this.state.message}
onChange={this.onChange}/>
</div>
);
}
});
ReactDOM.render(
<ExampleForm/>,
document.getElementById('view'));