React：どのコンポーネントが関数を呼び出すかを知る方法

Question

私はReactを使って私の最初のプロジェクトをやっています。私が理解できないことが1つあります。だから私は、多くの異なるTypeコンポーネントを持っていて、それは主コンポーネントのTypesPage状態に設定されています。そしてonChangeイベントがTypeコンポーネントで発生した場合、どのタイプがTypesPageの状態であるか、型配列内のどのインデックスかを知りたいので、data状態を再更新できます。 handleChange関数の内部

私は比較jQueryのgrepの機能を使用するには、すべての種類のアレイとTypeタイトル値をクリックしたが、私はそれはそれを行うには正しい方法ではありません、それは巨大な配列とやり過ぎだろうと確信しています。

は、なぜ私はES6を好むどの

handleChange:function(element, event){ 
    var typeIndex; 
    $.grep(types, function(e, index){ 
    if(element.title === e.title){ 
     typeIndex = index 
    } 
    }); 
    types[typeIndex] //Now I know that this is the Type that was changed 
} 

Fiddle

var types = [ 
    { 
    type_id: 1, 
    type_name: "Logo" 
    }, 
    { 
    type_id: 2, 
    type_name: "Ad" 
    }, 
    { 
    type_id: 3, 
    type_name: "Catalog" 
    }, 
]; 

var Type = React.createClass({ 
    render: function() { 
    return( 
     <li> 
     <input type="text" value={this.props.title} 
      onChange={this.props.handleChange.bind(null, this.props)} /> 
     </li> 
    ); 
    } 
}); 
var TypesContainer = React.createClass({ 
    render: function() { 
    var that = this; 
     return(
     <ul> 
      {this.props.data.map(function(entry){ 
      return(
       <Type 
       key={entry.type_id} 
       title={entry.type_name} 
       handleChange={that.props.handleChange} 
       /> 
      ); 
      })} 
     </ul> 
    );  
    } 
}); 
var TypesPage = React.createClass({ 
    getInitialState: function(){ 
    return({data: types}) 
    }, 
    handleChange: function(element, event){ 

    }, 
    render: function() { 
    return(
     <TypesContainer 
      data={this.state.data} 
     handleChange={this.handleChange} 
     /> 
    ); 
    } 
}); 

ReactDOM.render(
    <TypesPage />, 
    document.getElementById('container') 
); 

Answer 1

知りたいです。問題は、正しいコンテキストthisでbindのhandleChangeイベントを取得し、ハンドル内に入ると思われる引数を渡さなければならないことです。それはとは何の関係も反応して、ジャバスクリプトの私の理解不足を持っていないので、

class Example extends React.Component { 
    constructor(){ 
    super(); 
    this.state = { 
     data: [{id: 1, type: 'Hello'},{id: 2, type: 'World'},{id: 3, type: 'it"s me'}], 
     focusOn: null 
    }; 

    } 
    change(index,e){ 
    const oldData = this.state.data; 
    oldData[index].type = e.target.value; 
    this.setState({data:oldData, focusOn: index}) 
    } 
    render(){ 
    const list = this.state.data.map((item,index) => 
     // this is the way how to get focused element 
     <input key={item.id} value={item.type} onChange={this.change.bind(this, index)}/> 
    ); 
    return <div> 
     {list} 
     <p>Focused Element with index: {this.state.focusOn}</p> 
    </div> 
    } 
} 
React.render(<Example />, document.getElementById('container')); 

fiddle

おかげ