OnClick 反应按钮显示 table

Question

我试图点击一个反应按钮，并显示一个 table。按钮应该 return 一个 table 但是当我点击它时它 return 什么都没有。任何人都可以帮忙吗？非常感谢！

我的函数

    const getSchedule = () => {
   
    return (
        <div>
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>Schedule Id</th>
                        <th>Trainer Id</th>
                        <th>Date</th>
                        <th>Start Time</th>
                        <th>End Time</th>
                        <th>Action</th>

                    </tr>

                </thead>
                <tbody>
                    {/* {schedule.map(render_schedule)}  */}

                </tbody>
            </Table>
        </div>
    )

}

我的按钮：

Answer 1

let check=false
const getSchedule = () => {
    check=True
};

在你的主要功能中 return 使用类似这样的东西来显示你的 table 如果检查为真（检查初始化为假并点击按钮将其设置为真）：

{check && <div>..your table code here </div>}

您的 onClick 处理程序保持不变：

<button onClick={getSchedule}>show table</button>

Answer 2

这是因为即使您返回 table div 页面反应也不会重新呈现页面。

React 仅在状态改变时重新渲染页面

假设您想在按钮下方显示 table，您可以这样做：-

<Button onClick={()=>getSchedule()}>Search Schedule</Button>
<div>{this.state.schedule}</div>

在状态中创建时间表

constructor(props)
    {
        super(props);
        this.state = { schedule:[]};
    }

而不是最终在您的 getSchedule 中，您需要使用 setState()

分配所有要安排的 HTML 事物

 const getSchedule = () => {
   let newSchedule = [];
   newSchedule.push(<div><Table>.......</div>);
   this.setState({schedule:newSchedule});
}

此处最初 this.state.schedule 将是空的，因此不会呈现任何内容，但是当我们更新计划和 setState 时，它将重新呈现页面，但现在 this.state.schedule 将拥有您的 table HTML

OnClick 反应按钮显示 table

OnClick react Button to show table

reactjs

mern