React: Как узнать, какой компонент вызывает функцию

Question

Я делаю свой первый проект, используя React, и есть одна вещь, которую я не могу понять. Поэтому у меня много разных компонентов Type, которые устанавливаются в качестве основного компонента TypesPage. И когда событие onChange происходит на компоненте Type, я хочу знать, какой тип он находится в состоянии TypesPage или какой индекс он находится в массиве типов, поэтому я могу повторно заполнить свое состояние data.

Внутри handleChange функция Я использовал функцию Grep Jquery по сравнению щелкнул Type значение заголовка со всеми типами массива, но я уверен, что это не правильный способ сделать это, и это было бы излишеством с огромными массивами.

Почему я хочу знать, какие

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

Я предпочитаю ES6. Проблема в том, что у вас должно быть bind ваше событие handleChange с правильным контекстом this и передать свои аргументы, которые вы ожидаете получить внутри своего дескриптора. Смотрите пример ниже

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

Благодарности