时间戳

首页 > 解决方案 > ReactJS：使用 onClick 和 state 来显示元素的子集

javascript - ReactJS：使用 onClick 和 state 来显示元素的子集

问题描述

我刚开始学习 React 有一个问题

我有一个项目列表，根据其类型，我想在单击按钮时显示其中的一部分。有点像“第一页”、“上一页”、“下一页”、“最后一页”之类的东西，而是“A 型”、“B 型”等。所以当用户点击“A 型”时"，将显示具有类型 A 属性的项目列表。

这就是我所拥有的……这行得通吗？我对如何编写separateQuestsByType() 函数有点模糊，应该返回什么？如果有的话，这将如何工作。

class QuestList extends Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.state = {page:quests};
    }

render() {
        return (
            <div>
                <p className="bg-info" >Here is the list of requests
                <div className="container">
                    <div className="row">
                        <div className="col">
                            <div className="btn-group">
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({page:quests})} >Quests</button>
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({page:collections})} >Collections</button>
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({page:specialquests})} >Special Quests</button>
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({page:others})} >Others</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th className="col-md-2">Name</th>
                            <th className="col-md-2">ID</th>
                            <th className="col-md-2">Description</th>
                            <th className="col-md-2">Created Time (Pacific Time)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.requests.filter(separateQuestsByType).map(this.renderRequestRow.bind(this))}
                    </tbody>
                </table>
                <button type="button" className="btn btn-success" onClick={this.props.onAdd}>Add NewRequest</button>
            </div>
        );
    }

separateQuestsByType(){

}
    renderRequestRow(campaign, i) {
        return (
            <tr key={i}>
                <td>{quest.name}</td>
                <td>{quest.id}</td>
                <td>{quest.description}</td>
                <td>{quest.createdTime}</td>
            </tr>
        );
    }

版本 2，我将之前的代码更新为以下内容：

    constructor(props) {
        super(props);
        this.state = {};
        this.state = {type:typeA};
    }
    render() {
        return (
            <div>
                <div className="container">
                    <div className="row">
                        <div className="col">
                            <div className="btn-group">
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({type:typeA})} >Quests</button>
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({type:typeB})} >Collections</button>
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({type:typeD})} >Special Quests</button>
                                <button className="btn btn-info btn-sm" onClick={()=>this.setState({type:others})} >Others</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table className="table table-striped">
                    <thead>
                        <tr>
...
                        </tr>
                    </thead>
                    <tbody>
                        {this.props.campaigns.filter(this.separateQuestsByType.bind(this)).map(this.renderQuestRow.bind(this))}
                    </tbody>
                </table>
                <button type="button" className="btn btn-success" onClick={this.props.onAdd}>Add New Request</button>
            </div>
        );
    }

    separateQuestsByType(quest) {
        return quest.type === this.state.type
    }

一切都很好，除了最后一个，我想让它成为一个包罗万象的类别......有没有办法让 state.type 就好像它不是上面的任何东西一样？

标签： javascriptreactjs

解决方案

我假设你state.page是你用来过滤的？假设每个request项目都有一个与 的可能值相对应的道具，那么state.page您separateQuestsByType将是一个简单的过滤器：

separateQuestsByType(request){
  return request.someProp === this.state.page
}

或者你可以内联：

{this.props.requests
   .filter(request => request.someProp === this.state.page)
   .map(this.renderRequestRow.bind(this))
}

推荐阅读