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

它们作为 Prop 传递下来:

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

并渲染:

LeftPanel.js

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

当我点击任何元素时，什么也没有发生。出了什么问题？

---

当我在 LeftPanel.js 的渲染方法中将某些内容绑定(bind)到它时，它似乎会中断:

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

有效，

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

不起作用。

Answer 1

尝试绑定(bind) 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)}
            />)
        }

这对我来说效果很好。