Question

我在一个li中使用了两个不同的事件监听器，我看到了一些解决方案，但它对我不起作用。我的代码中的错误在哪里？

getListItem(){
    let listItems = this.props.category.map((category1,index) =>
            <li style={{color: this.state.index==index?'red': 'black'}}
                className={this.state.index == index ? "tab-link current" : "tab-link"}
                value={category1.id}
                onClick={(e) => {
                this.onclick.bind(this, index);
                this.props.selectCategory;}}
                key={index}>
                {category1.name}
            </li>
    );
    return listItems;
}

所以，需要使用这两个事件列表器

onClick={this.onclick.bind(this, index)} value={category1.id}
onClick={this.props.selectCategory}

selectCategory(e){
    this.setState({
        category: e.target.value
    });
    var url='http://api';
    superagent
        .get(url)
        .query({page:this.state.selectCategory, category_id: e.target.value})
        .set('Accept', 'application/json')
        .end ((error, response)=>{
        const startup=response.body.data.startup
        console.log(JSON.stringify(startup));
        this.setState({
            startup: startup,
            prevPage: response.body.data.prev_page,
            nextPage: response.body.data.next_page
        })
    })
}

Answer 1

当您想要在onClick听众中调用多个功能时，您不想做this.onclick.bind();，因为它不会调用该功能。相反，它返回一个函数。由于使用了箭头函数语法，因此您也不需要将this绑定到onclick函数。它会自动绑定this。

getListItem(){
    let listItems = this.props.category.map((category1,index) =>
            <li style={{color: this.state.index==index?'red': 'black'}}
                className={this.state.index == index ? "tab-link current" : "tab-link"}
                value={category1.id}
                onClick={(e) => {
                this.onclick(index);
                this.props.selectCategory(e);}}
                }}
                key={index}>
                {category1.name}
            </li>
    );
    return listItems;
},

onclick(index) {
  ....
}

在React中使用两个不同的onClick侦听器？

1 个答案: