Reactjs 我想在react中的按钮单击上显示用户详细信息

这是我的table.js页面

import React, {Component} from 'react'
import Reactable from 'reactable'

var Table = Reactable.Table;
var Thead = Reactable.Thead;
var Th = Reactable.Th;

export class Users extends Component {
    state = {
        pgNo: 0,
        users: [],
        isFetching:true
    };

    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(response => response.json())
            .then(res => {
                this.setState({users: res,isFetching:false});
            });
    }

    render() {
        return this.state.isFetching
            ? (
                <div class="loader" style={{marginLeft: "50%" }}>
                    <img src="/assets/index.svg"/>
                </div>
            )
            : (
                <div className="col-sm-10">

                    <Table
                        className="table"
                        style={{
                        marginLeft: "20%",
                        marginRight: "5%"
                    }}
                        filterable={["id", "name", "username", "email", "website"]}
                        noDataText="No matching records found"
                        itemsPerPage={7}
                        currentPage={this.state.pgNo}
                        sortable={true}
                        data={this.state.users}>
                        <Thead>
                            <Th column="id">ID</Th>
                            <Th column="name">Name</Th>
                            <Th column="username">Username</Th>
                            <Th column="email">Email address</Th>
                            <Th column="website">Website</Th>
                        </Thead>
                    </Table>
                </div>
            );
    }
}

import React，{Component}来自“React”
从“Reactable”导入Reactable
var Table=可反应的.Table；
var Thead=可反应的。Thead；
var Th=可反应的。Th；
导出类用户扩展组件{
状态={
编号:0,，
用户：[]，
isFetching：真的
};
componentDidMount（）{
取回（“https://jsonplaceholder.typicode.com/users")
.then（response=>response.json（））
。然后（res=>{
this.setState（{users:res，isFetching:false}）；
});
}
render（）{
返回this.state.isFetching
? (
)
: (
身份证件
名称
用户名
电子邮件地址
网站
);
}
}

这是我的index.js页面

import React from 'react'
import {render} from 'react-dom'
import {Menu} from './components/header'
import {Side} from './components/sidebar'
import {MainMenu} from './components/main'
import {ControlBar} from './components/sidebar2'
import {Users} from './components/table'

window.React = React;

render(<div>
    <Menu/><Side/><ControlBar/><MainMenu/>
    <Users/>
</div>, document.getElementById('react-container'))

从“React”导入React
从'react dom'导入{render}
从“./components/header”导入{Menu}
从“./components/sidebar”导入{Side}
从“./components/main”导入{MainMenu}
从“./components/sidebar2”导入{ControlBar}
从“./components/table”导入{Users}
window.React=反应；
渲染(
，document.getElementById（'react-container'））

我想创建一个新列，其中包含一个“关闭”按钮“查看详细信息”

当有人点击该按钮时，我想显示其中的所有用户详细信息，但它应该只改变网页的主体，并保持页眉、导航栏和页脚的原样

我是一个新的反应，我正在做一个项目

---

非常感谢您提供的所有帮助，请随时指出我在此代码中所犯的任何错误。

查看您的代码，我认为您的

组件将在表中呈现用户数据

您希望切换此表的显示状态

所以，你能做的是-

定义一个状态，

isTableEnabled

，并在构造函数中将其默认设置为

false

切换此状态单击按钮-

this.setState（{isTableEnabled:！this.state.isTableEnabled}）

向表的呈现附加一个条件，如

{this.state.isTableEnabled&&…}

映射

状态。用户

对象以填写表中的数据行

希望答案是：）

编辑

这里有一个片段。您的代码应该大致如下所示-

    handleClick = () => {
    this.setState({
        isTableEnabled: !this.state.isTableEnabled
    })
}
render() {
    return (
        <button onClick={this.handleClick} >Click here</button>
        {this.state.isTableEnabled && this.state.users &&
         <Table>....
         {this.state.users.map((result)=> {
             return (
                 <Tr><Td column="name">{result.something}</Td></Tr>
                );
            })}
        </Table>}
    );
}

handleClick=（）=>{
这是我的国家({
isTableEnabled:！this.state.isTableEnabled
})
}
render（）{
返回(
点击这里
{this.state.isTableEnabled&&this.state.users&&
....
{this.state.users.map（（结果）=>{
返回(
{result.something}
);
})}
}
);
}

在执行componentDidMount时，您已经拥有了数据。你只需要切换显示状态我可以怎么做？我是新手，反应很难。你能重写代码吗？更新了答案。不过，我觉得你应该自己尝试一下