Sha256: 372854fdc3205b8a387096338f339abe26c840c2a763f2b9bb102133e06ad22e
Contents?: true
Size: 1.58 KB
Versions: 2
Compression:
Stored size: 1.58 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 Immutable from 'immutable'; import _ from 'lodash'; // Simple example of a React "dumb" component export default class HelloWorldWidget extends React.Component { static propTypes = { // We prefix all property and variable names pointing to Immutable.js objects with '$$'. // This allows us to immediately know we don't call $$helloWorldStore['someProperty'], but instead use // the Immutable.js `get` API for Immutable.Map actions: PropTypes.shape({ updateName: PropTypes.func.isRequired, }).isRequired, $$helloWorldStore: PropTypes.instanceOf(Immutable.Map).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.actions.updateName(name); } render() { const $$helloWorldStore = this.props.$$helloWorldStore; const name = $$helloWorldStore.get('name'); return ( <div> <h3> Hello, {name}! </h3> <p> Say hello to: <input type="text" value={name} onChange={this._handleChange} /> </p> </div> ); } }
Version data entries
2 entries across 2 versions & 1 rubygems