-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.js
91 lines (72 loc) · 2.03 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/** @jsx React.DOM */
var _ = require('lodash');
var React = require('./react');
var socketMixin = require('./socket-mixin')('http://carl.local:3000');
var person = React.createClass({
updateValue: function (e) {
this.state.person.name = e.target.value;
this.setState({ person: this.state.person });
this.props.onChange(this.state.person);
},
componentWillReceiveProps: function (props) {
this.setState({
person: props.person
});
},
getInitialState: function () {
return {
person: this.props.person
};
},
render: function () {
return (
<div>
<h2>{this.state.name}</h2>
<input type='text' onChange={this.updateValue} value={this.state.person.name}/>
</div>
);
}
});
var people = React.createClass({
mixins: [socketMixin],
updateValue: function (e) {
this.setState({ name: e.target.value });
},
add: function () {
this.state.people.push({ name: this.state.name });
this.setState({ people: this.state.people, name: '' });
},
remove: function (person) {
this.state.people.splice(this.state.people.indexOf(person), 1)
this.setState({ people: this.state.people });
},
change: function (person) {
this.setState(this.state);
},
getInitialState: function () {
return {
people: [{ id: 0, name: 'Jimi' }, { id: 1, name: 'Stevie' }, { id: 2, name: 'eric' } ],
name: ''
};
},
render: function () {
var list = this.state.people.map(function (data) {
return (
<li>
<person person={data} onChange={this.change}></person>
<button onClick={this.remove.bind(this, data)}>Remove</button>
</li>
);
}.bind(this));
return (
<div>
<ul>{list}</ul>
<input type='text' onChange={this.updateValue} value={this.state.name}/>
<button onClick={this.add}>Add</button>
</div>
)
}
});
document.addEventListener('DOMContentLoaded', function () {
React.renderComponent(<people></people>, document.getElementById('content'));
});