如何隐藏票证和还原按钮

我有一个票证列表,我需要为每个票证添加一个隐藏按钮,我还创建了一个隐藏票证数组,因此当我隐藏票证时,票证将插入其中,并将从显示的第一个数组中删除屏幕上的所有票。 当我至少有一张票证被隐藏时,会出现一个新的“恢复”按钮,它需要给我一个还原所有内容的选项,它还会打印出现在隐藏了多少张票证。 所以我在状态中添加了一个remove:布尔值,并尝试根据此条件进行过滤,但是在handleclickHide和handleclickShow函数上以及在创建hiddenTickets数组上有很多错误,我不明白为什么吗?这是一些代码:

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

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


    state: AppState = {
        search: '',remove:false
    }

    async componentDidmount() {
        this.setState({
            tickets: await api.getTickets()
        });

        (hiddenTickets: Ticket[])=>{
            const hidden = hiddenTickets
            .filter((t) => ((t: { title: any; })=>t.title!==t));
        }
    }

    handleclickHide=(ticket)=> {
        ticket.preventDefault();
        ticket.remove=true;
        this.setState({HiddenTickets:[ticket,...this.state.HiddenTickets]});
        this.state.filteredTicket=this.state.filteredTicket.filter(ticket=>!ticket.remove});
        const hiddenCount=this.state.HiddenTickets.length();
        <div>
        <button onClick={this.handleclickShow}>restore</button>
        <div hiddenCount> hidden tickets</div>
        </div>
    };
    handleclickShow=()=>{
        ticket.remove=false;
        this.setState({HiddenTickets:[]});
        this.setState({filteredTickets=tickets.filter((t)=>(t.title.toLowerCase() + t.content.toLowerCase()).includes(this.state.search.toLowerCase())});
    this.state.HiddenTickets.pop());
    };

    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.id} classname='ticket'>
                <div style={{display:"flex",justifyContent: 'center'}}>
                <button onClick={this.handleclickHide}>hide
                </button>
                </div>
                <h5 classname='title'>{ticket.title}</h5>

                <div classname='content'>{ticket.content.toLocaleString()}</div>

                <footer>
                    <div classname='meta-data'>By {ticket.userEmail} | { new Date(ticket.creationTime).toLocaleString()}</div>
                </footer>
            </li>))}
        </ul>);
    }


    render() {  
        const {tickets} = this.state;

        return (

        <main>
            <h1>Tickets List</h1>
            <header>
                <input type="search" placeholder="Search..." onChange={(e) => this.onSearch(e.target.value)}/>
            </header>
            {tickets ? <div classname='results'>Showing {tickets.length} results</div> : null } 
            {tickets ? this.renderTickets(tickets) : <h2>Loading..</h2>}
        </main>

        )

    }
}

export default App;

非常感谢您的帮助

w12240cn 回答:如何隐藏票证和还原按钮

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2844712.html

大家都在问