ReactJS OnClick не работает для сгенерированных элементов

Question

Я порождающий список элементов:

LeftPanel.js

if (this.state.trader_or_team == 'trader') { 
      itemList = users.map(u => <User key={u.id} user={u} 
              selected={this.props.selected_trader && this.props.selected_trader.id == u.id} 
              onClick={this.props.handleTraderSelection.bind(this, u)} 
      />); 
     } else { 
      itemList = teams.map(t => <Team key={t.id} team={t} 
              selected={this.props.selected_team && this.props.selected_team.id == t.id} 
              onClick={this.props.handleTeamSelection.bind(this, t)} 
      />) 
     } 

handleTeamSelection/handleTraderSelection находятся в родительском компоненте:

TargetManager .js

handleTraderSelection(selected_trader) { 
     console.log('test') 
     this.setState({ 
      selected_trader 
     }); 
    } 

    handleTeamSelection(selected_team) { 
     this.setState({ 
      selected_team 
     }); 
    } 

Они передаются в качестве реквизита:

<LeftPanel 
            handleTraderSelection={::this.handleTraderSelection} 
            handleTeamSelection={::this.handleTeamSelection} 
         /> 

И оказывается:

LeftPanel.js

return(
    <div className="item-container"> 
     {itemList} 
    </div> 
) 

Когда я нажимаю на любой из элементов ничего не происходит вообще. Что происходит не так?

---

Это, кажется, ломаются, когда я связать что-то к нему, в методе визуализации LeftPanel.js:

render() { 
    this.props.handleTraderSelection() 
    ... 

Работы,

render() { 
    this.props.handleTraderSelection.bind(this) 
    ... 

не работает.

Answer 1

Попробуйте связывание функции handleTraderSelection и handleTeamSelection как

handleTraderSelection = (selected_trader) => { 
     console.log('test') 
     this.setState({ 
      selected_trader 
     }); 
    } 

    handleTeamSelection = (selected_team) => { 
     this.setState({ 
      selected_team 
     }); 
    } 

Я следовал обычному метод для вызова родительской функции, как

handleTraderSelection = (value) => { 
    this.props.handleTraderSelection(value); 
} 
handleTeamSelection= (value) => { 
    this.props.handleTeamSelection(value); 
} 
if (this.state.trader_or_team == 'trader') { 
      itemList = users.map(u => <User key={u.id} user={u} 
              selected={this.props.selected_trader && this.props.selected_trader.id == u.id} 
              onClick={this.handleTraderSelection.bind(this, u)} 
      />); 
     } else { 
      itemList = teams.map(t => <Team key={t.id} team={t} 
              selected={this.props.selected_team && this.props.selected_team.id == t.id} 
              onClick={this.handleTeamSelection.bind(this, t)} 
      />) 
     } 

и это работает для меня хорошо.

Answer 2

мне не хватает моего OnClick для моих элементов ...:

export default class User extends Component { 

    render() { 
     return (
      <div onClick={this.props.onClick}> 
      ...