オブジェクト更新からマッピングされた入力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> 
    ); 
    } 
}); 

link to code

私は言及しています後藤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> 
    ); 
    }