I am trying to map out an object into inputs that can be updated onChange. everything works except the component never updates after this.setState().
var ItemModal = React.createClass({
getInitialState: function(){
return {
title: "",
cooktime: "",
ingredients: [],
instructions: ""
}
},
componentWillReceiveProps: function(nextProps) {
this.setState({
title: nextProps.inputVal.title,
cooktime: nextProps.inputVal.cooktime,
ingredients: nextProps.inputVal.ingredients,
instructions: nextProps.inputVal.instructions
});
},
handleChange: function(event){
var change = {};
console.log(event.target.id + " " + event.target.value)
change[event.target.id] = event.target.value;
console.log(change);
this.setState(change);
},
render: function (){
var handleChange = this.handleChange;
var inputVal = this.props.inputVal;
return (
<div id="itemModal">
<div id="modalContent">
{
Object.keys(this.props.inputVal).map(function(curr){
return <input id={curr} placeholder= "Recipe Name Here!" type="text" value= {inputVal[curr]|| ""} onChange = {handleChange.bind(this)}/>
})
}
</div>
</div>
);
}
});
goto ItemModal code I am mentioning is in there.
The handleChange
is inside a class. So, you need to use this
to access it within the class. Change your render
as follows.
render: function (){
var handleChange = this.handleChange;
var inputVal = this.props.inputVal;
var _this = this;
return (
<div id="itemModal">
<div id="modalContent">
{
Object.keys(this.props.inputVal).map(function(curr){
return <input id={curr} placeholder= "Recipe Name Here!" type="text" value= {inputVal[curr]|| ""} onChange = {_this.handleChange.bind(_this)}/>
})
}
</div>
</div>
);
}
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.