reactjs - 反应按值排序

问题描述

我收到了一个需要添加功能的 shell 代码。我是这个 shell 中嵌入的 HTML、CSS、React 等的初学者。我有一个 json 文件，其中包含我的票证，其中包括 id、创建时间、标题等。我希望添加一个按钮来按值排序票证，例如创建时间。我已经尝试了许多我见过的格式，但到目前为止都没有工作，这是返回的代码的当前状态：“TypeError：无法读取未定义的属性'sortByDate'”关于toggleSortDate（删除了我认为不相关的部分):

import React from 'react';
import './App.scss';
import {createApiClient, Ticket} from './api';

export type AppState = {
    tickets?: Ticket[],
    search: string;
}

export class App extends React.PureComponent<{}, AppState> {

    state: AppState = {
        search: ''
    }

    sortByDate () {
        const {tickets} = this.state;
        let ordTickets = tickets
        ordTickets = tickets.sort((a, b) => a.creationTime < b.creationTime)
        this.setState({
            tickets: ordTickets
        })
    }

    toggleSortDate (event) {
    this.sortByDate()
    }

    renderTickets = (tickets: Ticket[]) => {

        const filteredTickets = tickets
            .filter((t) => (t.title.toLowerCase() + t.content.toLowerCase()).includes(this.state.search.toLowerCase()));
        return (<ul className='tickets'>
            {filteredTickets.map((ticket) => (<li key={ticket.title} className='ticket'>
                <h5 className='title'>{ticket.title}</h5>
                <button onClick={this.rename}>Rename</button>
                <h6 className='meta-data'> {ticket.content}</h6>
                <footer>
                    <div className='meta-data'>By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</div>
                </footer>
            </li>))}
        </ul>);
    }


    render() {
        const {tickets} = this.state;
        return (<main>
            <button onClick={this.darkMode}>Dark mode</button>
            <h1>Tickets List</h1>
            <header>
                <input type="search" placeholder="Search..." onChange={(e) => this.onSearch(e.target.value)}/>
            </header>
            <button onClick={this.toggleSortDate}>Sort by date</button>
            <button onClick={()=>this.onSort('date')}>Sort By Title</button>
            <button onClick={()=>this.onSort('date')}>Sort By Email</button>
            {tickets ? <div className='results'>Showing {tickets.length} results</div> : null }
            {tickets ? this.renderTickets(tickets) : <h2>Loading..</h2>}

        </main>)
    }
}
export default App;
    /*    <button onclick={this.sort(creationTime)}>Sort by date</button>*/

我非常感谢一些帮助:)

编辑

非常感谢您的帮助，我已按照#k-wasilewski 的建议添加了构造函数，并且我将排序更新为此并且它可以工作：

sortByDate () {
        const {tickets} = this.state
        const arr = [...tickets].sort((a, b) => (a.creationTime < b.creationTime)? 1:-1)
console.log(tickets)
        this.setState({
            tickets : arr
        })
    console.log(arr);
    }
    SortDate (event) {
    this.sortByDate()
    }

标签： reactjssortingbutton

要使全局this可识别，必须在构造函数中绑定您的函数：

constructor() {
    super();

    this.toggleSortDate = this.toggleSortDate.bind(this);
}

或者只使用箭头函数，默认情况下它们是绑定的：

const toggleSortDate = (event) => {
    // ...
}

reactjs - 反应按值排序

问题描述

解决方案

推荐阅读