從對象映射的輸入更新onChange React.JS

Question

我試圖將一個對象映射到可以在onChange上更新的輸入中。 一切正常，除了組件在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代碼在其中。

Answer 1

handleChange在一個類中。 所以，你需要使用this該類中訪問它。 如下更改render 。

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