Как отобразить таблицу на той же странице, нажмите на ссылку? - PullRequest
Новая
       11

Как отобразить таблицу на той же странице, нажмите на ссылку?

0 голосов
/ 18 февраля 2019

У меня есть основной компонент DisplayLinks.js.В этом компоненте, нажимая на ссылку, я хочу отобразить таблицу с ней на той же странице.Мой второй компонент - StudentListTable, в который я добавляю таблицу с реквизитом.Это не показывает, почему?

Я добавил свой пример кода здесь: 

state = {
        visible: false,
        showTable:false
    }

    showCourseModal = () => {
        this.setState({
            visible: true,
        });
    }


    showStudentList = () => {
        this.setState({
            showtable: true,
        })

    }


    render() {
        return (
            <div align="center">
            <a href="#" onClick={this.showCourseModal}>Course</a>
            <a href="#" onClick={this.showStudentList}>StudentList</a>
                <CourseModal
                    visible={this.state.visible}
                    onOk={this.onOk}
                    onCancel={this.onCancel} />
                    <StudentListtable showtable={this.state.showTable} data={data}/>

            </div>
        )
    }

Второй компонент: 

 state = {
    showTable: this.props.showTable,
}
                render() {

                    return (
                        <div>
                            <div align="right">
                                <Button
                                    type="primary">Update</Button>
                            </div>
                            <Table
                                dataSource={this.props.data}
                                showTable={this.props.showTable}
                                columns={columns}
                                pagination={{ pageSize: 5 }}

                            />
                        </div>
                    )
                }

1 Ответ

0 голосов
/ 18 февраля 2019

Вы можете справиться с этим, обработав внутренний компонент рендеринга следующим образом: 

render() {
  return (
    <div align="center">
    <a href="#" onClick={this.showCourseModal}>Course</a>
    <a href="#" onClick={this.showStudentList}>StudentList</a>
      <CourseModal
        visible={this.state.visible}
        onOk={this.onOk}
        onCancel={this.onCancel} />
        {
          this.state.showTable?
            <StudentListtable data={data}/>
          :
            <p>No tables to show</p>
        }
    </div>
  )
}
...