49 lines
1.0 KiB
JavaScript
49 lines
1.0 KiB
JavaScript
/** @jsx React.DOM */
|
|
var React = require('react');
|
|
var CheckboxStore = require('../stores/CheckboxStore.js');
|
|
|
|
var NameThrower = React.createClass({
|
|
getInitialState: function () {
|
|
return {
|
|
name: '',
|
|
colors: CheckboxStore.getColors()
|
|
};
|
|
},
|
|
componentWillMount: function () {
|
|
CheckboxStore.addChangeListener(this.update);
|
|
},
|
|
componentWillUnmount: function () {
|
|
CheckboxStore.removeChangeListener(this.update);
|
|
},
|
|
update: function () {
|
|
this.setState({
|
|
colors: CheckboxStore.getColors()
|
|
});
|
|
},
|
|
updateName: function (event) {
|
|
this.setState({
|
|
name: event.target.value
|
|
});
|
|
},
|
|
renderColors: function (color, index) {
|
|
var style = {color: color};
|
|
return <div key={index} style={style}>{this.state.name}</div>
|
|
},
|
|
render: function() {
|
|
var names = this.state.colors.map(this.renderColors);
|
|
return (
|
|
<div>
|
|
<div>
|
|
<input type="text" value={this.state.name} onChange={this.updateName}/>
|
|
</div>
|
|
<div>
|
|
{names}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
});
|
|
|
|
module.exports = NameThrower;
|