40 lines
892 B
JavaScript
40 lines
892 B
JavaScript
|
/** @jsx React.DOM */
|
||
|
|
var React = require('flux-react');
|
||
|
|
var Constants = require('../Constants.js');
|
||
|
|
var CheckboxStore = require('../stores/CheckboxStore.js');
|
||
|
|
|
||
|
|
var NameThrower = React.createClass({
|
||
|
|
stores: [CheckboxStore],
|
||
|
|
getInitialState: function () {
|
||
|
|
return {
|
||
|
|
name: '',
|
||
|
|
colors: CheckboxStore.getColors()
|
||
|
|
};
|
||
|
|
},
|
||
|
|
storesDidUpdate: function () {
|
||
|
|
this.setState({
|
||
|
|
colors: CheckboxStore.getColors()
|
||
|
|
});
|
||
|
|
},
|
||
|
|
updateName: function () {
|
||
|
|
this.setState({
|
||
|
|
name: this.refs.input.getDOMNode().value
|
||
|
|
});
|
||
|
|
},
|
||
|
|
render: function() {
|
||
|
|
var names = this.state.colors.map(function (color, index) {
|
||
|
|
var style = {color: color};
|
||
|
|
return <div key={index} style={style}>{this.state.name}</div>
|
||
|
|
}, this);
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<input ref="input" type="text" value={this.state.name} onChange={this.updateName}/>
|
||
|
|
{names}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
module.exports = NameThrower;
|