The library for web and native user interfaces.
Fix bug in todomvc
petehunt committed
Jun 3, 2013 at 00:44 UTC
a32276e400785fdeafdfb2685cd8154aa4a7cc38
1 file changed
+13
-4
examples/todomvc/js/app.js
+13
-4
@@ -33,10 +33,10 @@ function cx(obj) {
33
34
var TodoItem = React.createClass({
35
handleSubmit: React.autoBind(function() {
36
- var val = this.refs.editField.getDOMNode().value.trim();
36
+ var val = this.state.editText;
37
if (val) {
38
this.props.onSave(val);
39
- this.refs.editField.getDOMNode().value = '';
39
+ this.setState({editField: ''});
40
}
41
return false;
42
}),
@@ -48,7 +48,16 @@ var TodoItem = React.createClass({
48
if (event.nativeEvent.keyCode === 27) {
49
this.handleSubmit();
50
}
51
+ this.setState({editText: event.target.value});
52
}),
53
+ getInitialState: function() {
54
+ return {editText: this.props.todo.title};
55
+ },
56
+ componentWillReceiveProps: function(nextProps) {
57
+ if (nextProps.todo.title !== this.props.todo.title) {
58
+ this.setState(this.getInitialState());
59
+ }
60
+ },
61
render: function() {
62
return (
63
<li class={cx({completed: this.props.todo.completed, editing: this.props.editing})}>
@@ -66,9 +75,9 @@ var TodoItem = React.createClass({
75
<input
76
ref="editField"
77
class="edit"
69
- value={this.props.todo.title}
78
+ value={this.state.editText}
79
onBlur={this.handleSubmit}
71
- onKeyDown={this.handleKey}
80
+ onKeyUp={this.handleKey}
81
/>
82
<input type="submit" class="submitButton" />
83
</form>