Question

我的组件中有一个材料ui列表。当我单击此列表中的任何项目时，我转到另一个listView。我正在使用路由器去另一个listView。并使用onClick方法。每当我点击第一个列表的任何列表项时，我打印＆＃34; firstList点击＆＃34;。每当我点击第二个列表中的任何项目时，它会打印＆＃34; secondList点击＆＃34;。

这是我的问题：当我单击第一个列表的ListItem时，console.log（＆＃34;第二个列表单击＆＃34;）也会打印＆＃34; firstList Clicked＆＃34;自动。我在第二个列表中有四个列表项，因此我的控制台打印输出如下所示

firstList Clicked secondList单击 secondList单击 secondList单击 secondList单击

为什么会这样？

这是我的代码。

SecondList代码

class TagListItemDetails extends Component {
    handleClick() {
        console.log("secondList clicked")
    }

    handleButtonClick() {
        browserHistory.push("TagList")
    }

    render() {

        return (
            <MuiThemeProvider>
                <div>
                    <List id="parent-list-tags">
                        <ListItem primaryText="Kitchen" onTouchTap={this.handleClick()}/>
                        <ListItem primaryText="Beach" onClick={this.handleClick()}/>
                        <ListItem primaryText="Marriage" onClick={this.handleClick()}/>
                        <ListItem primaryText="Garden" onClick={this.handleClick()}/>
                    </List>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
                    <div className="backButton">
                        <RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick} labelColor="white">

                        </RaisedButton>
                    </div>
                </div>
            </MuiThemeProvider>

        );
    }
}

const mapStateToProps =(state) =>{
    return {
        tags: state.tagReducer
    };
};

function matchDispatchToProps(dispatch){
    return bindActionCreators({tagSelected: tagSelected}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(TagListItemDetails);

firstList

export default class TagList extends Component {


    handleClicked() {
        console.log("firstList Clicked")
        browserHistory.push("TagListItemDetails")
    }

    render() {

        return (
            <div>
                <List id="parent-list-tags" >
                    <ListItem primaryText="Scene" onClick={this.handleClicked}  />
                    <Divider/>
                    <ListItem primaryText="Actors" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Emotions" onClick={this.handleClicked} />
                    <Divider/>
                    <ListItem primaryText="Actions" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Objects" onClick={this.handleClicked}/>
                    <Divider/>
                    <ListItem primaryText="Compliance" onClick={this.handleClicked} />
                </List>
                <AddButton />
            </div>

    )
    }
};

Answer 1

问题是在SecondList中，只要加载了组件，就会调用handleClick方法。尝试从onClick处理程序中删除括号()。而不是

<ListItem primaryText="Beach" onClick={this.handleClick()}/>

你可以使用：

<ListItem primaryText="Beach" onClick={this.handleClick}/>
------------------------------------------------------^^ No parentheses here

将参数传递给作为prop传递的单击处理程序的一种方法是使用胖箭头函数：

onClick={() => this.props.itemSelected(2)}

// or if you want to pass the event as well: 

onClick={(event) => this.props.itemSelected(2, event)}

此外，这是一个如何在onClick事件上触发两个函数的演示：http://codepen.io/PiotrBerebecki/pen/YGRQrG

材质UI列表onClick会在嵌套列表上触发单击事件

1 个答案: