React中按钮OnClick调用返回组件函数无响应问题

你的问题出在按钮的onClick事件用法错误：你把一个返回JSX的函数直接传给了onClick，但React的事件回调是用来执行逻辑的，不会自动把返回的JSX渲染到页面上。要实现点击后渲染表格，需要用状态控制组件的显示/隐藏。

修正步骤 #

1. 引入React的useState钩子，用来管理表格的显示状态
2. 修改按钮的点击回调，改为更新状态而非直接返回JSX
3. 在组件的渲染逻辑中，根据状态条件渲染表格

修正后的完整代码 #

import { useState } from 'react';
import '../css/customButton.css';
import '../css/customDropDownButton.css';
import '../css/customBoxContainer.css';
import '../css/customTableComponent.css';
import CustomTextbox from '../components/CustomFormTextBoxContainer.tsx';
import CustomButton from '../components/CustomButtonContainer.tsx';
import CustomPersonDropDownButton from '../components/CustomDropDownButton.tsx';
import JsonData from '../data/personType.json'
import {RegistrationTableHeader} from '../enums/TableValues.tsx';

export default function CreateForm(){
    // 新增状态：控制表格是否显示
    const [showTable, setShowTable] = useState(false);

    const DisplayData=JsonData.map(
        (info)=>(
            <tr key={info.first_name + info.last_name}> {/* 循环渲染需添加唯一key */}
                <td>{info.first_name}</td>
                <td>{info.last_name}</td>
                <td>{info.Category}</td>
            </tr>
        )
    )

    // 修改点击回调：更新状态，而非返回JSX
    const handleShowTable = () => {
        setShowTable(true);
    }

    return(
        <div className='containerBox'>
            <CustomTextbox
            label='First Name'
            placeholder='First Name' />
            <CustomTextbox
            label='Last Name'
            placeholder='Last Name' />
            <CustomPersonDropDownButton />
            <CustomButton
            title='Register person' onClick={handleShowTable}/>
            
            {/* 根据状态条件渲染表格 */}
            {showTable && (
                <div>
                    <table>
                        <thead>
                            <tr>
                            <th>{RegistrationTableHeader.first_name}</th>
                            <th>{RegistrationTableHeader.last_name}</th>
                            <th>{RegistrationTableHeader.Category}</th>
                            </tr>
                        </thead>
                        <tbody>
                        {DisplayData}
                        </tbody>
                    </table>
                </div>
            )}
        </div>
    )
}

关键说明 #

• 状态管理：useState(false)初始化表格为隐藏状态，点击按钮时setShowTable(true)切换状态
• 条件渲染：{showTable && <表格内容>}是React常用的条件渲染方式，仅当showTable为true时渲染表格
• 循环key：给循环生成的<tr>添加唯一key属性，满足React列表渲染的要求，避免控制台警告

如果之前已将表格拆分为独立组件，也可直接条件渲染该组件，例如：

{showTable && <YourTableComponent />}

内容的提问来源于stack exchange，提问作者Alexandru M