Why I am not able to attach onBlur to component created in react?
Question
I am learning react.js
I created an example where there is a textarea, If I enter comma seperated names in that textarea, I show a listing those names below the textarea.
the working example is as follows, click here
The code is as follows
<!DOCTYPE HTML>
<html>
<head>
<title>React Template</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.mywidth{
width : 50%;
}
</style>
</head>
<body>
<!-- Body Content -->
<div id="mainContent"></div>
<!-- Body Content -->
<!-- The core React library -->
<script src="/node_modules/react/dist/react.min.js"></script>
<!-- The ReactDOM Library -->
<script src="/node_modules/react-dom/dist/react-dom.min.js"></script>
<script type="text/javaScript">
(function(){
'use strict'
// custom javaScript content
var DataFeedComponent = React.createClass({
propTypes : {
"defaultValue" : React.PropTypes.string.isRequired
},
getDefaultProps : function(){
return {
"content" : ""
}
},
getInitialState : function(){
return {
"content" : this.props.defaultValue
}
},
doRenderingUI : function(evt){
this.setState({
content : evt.target.value
});
},
render : function(){
var TextAreaElement = React.createElement("textarea",{
"className" : "mywidth",
"value" : this.state.content,
"onChange" : this.doRenderingUI
});
var listElementArray = [];
var someContent = this.state.content.split(",");
for(var x = 0; x < someContent.length; x++){
if(someContent[x] !== undefined && someContent[x] !== null && someContent[x] !== ""){
listElementArray.push(React.createElement("li",null,someContent[x]));
}
} // end of for
var orderedListingElement = React.createElement("ol",null,listElementArray);
var DivElement = React.createElement("div",null,TextAreaElement,orderedListingElement);
return DivElement;
}
});
var elementObject = React.createElement(DataFeedComponent,{ "defaultValue" : "Victor,Nick" });
ReactDOM.render(elementObject,document.getElementById("mainContent"));
})();
</script>
</body>
</html>
So my problem is
on event 'onChange' my example works fine,
render : function(){
var TextAreaElement = React.createElement("textarea",{
"className" : "mywidth",
"value" : this.state.content,
"onChange" : this.doRenderingUI
});
ie on entering the text in textarea I am able to see the listing below the textarea.
BUT
if I change to onBlur, it doesn't work. why ?
2 answers
solution1
0 2017-09-11 12:53:22
You have your component's value set as a derivative of your this.state.content . This is what is called a controlled component , in order to change what appears in the field, you must change the React state every time something happens (ie when a button is pressed).
onBlur is not activated when the input changes, it's activated when you deselect the element. Hence your app never has a chance to actually change the input.
solution2
0 2017-09-11 13:32:02
Your component is a controlled component, since you have set value to your Textarea .
Everytime you type, onChange gets called, which in turn updates the state and that inturn updates the value in textarea. When you change to onBlur , your state is never set, and so when you type the value is not changing.
Simplest solution would be to change value to defaultValue , since i guess you want to pass initial value to your Textarea and that would look something like below
var TextAreaElement = React.createElement("textarea",{
"className" : "mywidth",
"defaultValue" : this.state.content,
"onBlur" : this.doRenderingUI
});
But if you want the component to be still controlled, then you need to pass both onChange and onBlur and handle it appropriately.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.