The library for web and native user interfaces.
Fix `ReactDOMInput` and `ReactDOMTextarea` Race Condition
This fixes a race condition if the `onClick` tries to update the input or textarea (e.g. by calling `setState`): <input onClick={function(event) { this.setState({somethingElse: true}); // Triggers an update. // event.target.value is now equal to the old value, fail... this.props.onChange(event); }) />
CommitSyncScript committed
Jul 1, 2013 at 12:59 UTC
40bebf0c861700b387dc848a2538eef4b96778a4
2 files changed
+14
src/dom/components/ReactDOMInput.js
+7
@@ -52,6 +52,11 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
52
};
53
},
54
55
+ shouldComponentUpdate: function() {
56
+ // Defer any updates to this component during the `onChange` handler.
57
+ return !this._isChanging;
58
+ },
59
+
60
getChecked: function() {
61
return this.props.checked != null ? this.props.checked : this.state.checked;
62
},
@@ -91,7 +96,9 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
96
handleChange: ReactCompositeComponent.autoBind(function(event) {
97
var returnValue;
98
if (this.props.onChange) {
99
+ this._isChanging = true;
100
returnValue = this.props.onChange(event);
101
+ this._isChanging = false;
102
}
103
this.setState({
104
checked: event.target.checked,
src/dom/components/ReactDOMTextarea.js
+7
@@ -84,6 +84,11 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
84
};
85
},
86
87
+ shouldComponentUpdate: function() {
88
+ // Defer any updates to this component during the `onChange` handler.
89
+ return !this._isChanging;
90
+ },
91
+
92
getValue: function() {
93
return this.props.value != null ? this.props.value : this.state.value;
94
},
@@ -118,7 +123,9 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
123
handleChange: ReactCompositeComponent.autoBind(function(event) {
124
var returnValue;
125
if (this.props.onChange) {
126
+ this._isChanging = true;
127
returnValue = this.props.onChange(event);
128
+ this._isChanging = false;
129
}
130
this.setState({value: event.target.value});
131
return returnValue;