Question

这是我的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>
            );
    }
}

这是我的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'))

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

当某人单击该按钮时，我想在其中显示所有用户详细信息，但它只应更改网页的正文并使标题，导航栏和页脚保持原样

我是新来的人，我正在做一个项目。

感谢所有帮助，并随时指出我在此代码中犯的任何错误。

Answer 1

看看您的代码，假设您的<Users />组件将用户数据呈现在表中。

您要切换此表的显示状态。

所以，您可以做的是-

定义状态isTableEnabled，并在构造函数中将其默认设置为false。
切换按钮的此状态onClick-this.setState({isTableEnabled: !this.state.isTableEnabled})
为表的呈现附加条件，例如{this.state.isTableEnabled && <Table>...</Table>}
映射state.users对象以填写表中的数据行。

希望这个答案：）

编辑

这是一个片段。您的代码应该大致像这样-

    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>}
    );
}

我想在单击按钮时显示用户详细信息

1 个答案: