从对象映射的输入更新onChange React.JS

Question

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>  
     );
   }
 });

link to code

goto ItemModal code I am mentioning is in there.

Answer 1

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>  
     );
   }