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方法中，当我绑定一些内容时，它似乎会中断：

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 for my elements ...：

export default class User extends Component {

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

ReactJS Onclick不适用于生成的元素

2 个答案: