Sha256: 88a3121a7912a02b93dab44e9935f8e5d34548bb8548291d124ed70f1976c423
Contents?: true
Size: 1.87 KB
Versions: 2
Compression:
Stored size: 1.87 KB
Contents
// HelloWorldWidget is an arbitrary name for any "dumb" component. We do not recommend suffixing
// all your dump component names with Widget.
import React, { PropTypes } from 'react';
import _ from 'lodash';
<%- unless options.skip_bootstrap? -%>
import { Input } from 'react-bootstrap';
<%- end -%>
// Simple example of a React "dumb" component
export default class HelloWorldWidget extends React.Component {
static propTypes = {
// If you have lots of data or action properties, you should consider grouping them by
// passing two properties: "data" and "actions".
updateName: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
};
constructor(props, context) {
super(props, context);
// Uses lodash to bind all methods to the context of the object instance, otherwise
// the methods defined here would not refer to the component's class, not the component
// instance itself.
_.bindAll(this, 'handleChange');
}
// React will automatically provide us with the event `e`
handleChange(e) {
const name = e.target.value;
this.props.updateName(name);
}
render() {
const { name } = this.props;
return (
<div className="container">
<h3>
Hello, {name}!
</h3>
<hr />
<form className="form-horizontal">
<%- if options.skip_bootstrap? -%>
<label>
Say hello to:
</label>
<input
type="text"
value={name}
onChange={this.handleChange}
/>
<%- else -%>
<Input
type="text"
labelClassName="col-sm-2"
wrapperClassName="col-sm-10"
label="Say hello to:"
value={name}
onChange={this.handleChange}
/>
<%- end -%>
</form>
</div>
);
}
}
Version data entries
2 entries across 2 versions & 1 rubygems