时间戳

首页 > 解决方案 > 第二次点击react js时侧边栏没有更新

reactjs - 第二次点击react js时侧边栏没有更新

问题描述

我的要求是，当我单击表格行中的名称时，相应的详细信息应显示在侧栏中。这在第一次尝试时工作正常，但要求是单击下一个条目应更新侧边栏，而无需手动刷新页面。另外，我注意到，一旦侧边栏打开（第一次尝试），在手动刷新页面之前，我无法单击表中的任何条目。

请帮忙。

我正在使用“react-sidebar”中的侧边栏

以下是 App.js

import React, {
  Component
} from 'react';
import Sidebar1 from "./Sidebar1";
import './App.css'



class App extends Component {
  constructor(props) {
    super(props);

    this.state = { //state is by default an object
      students: [{
          id: 1,
          name: 'Wasif',
          age: 21,
          email: 'wasif@email.com'
        },
        {
          id: 2,
          name: 'Ali',
          age: 19,
          email: 'ali@email.com'
        },
        {
          id: 3,
          name: 'Saad',
          age: 16,
          email: 'saad@email.com'
        },
        {
          id: 4,
          name: 'Asad',
          age: 25,
          email: 'asad@email.com'
        },
        {
          id: 5,
          name: 'kiwi',
          age: 20,
          email: 'kiwi@email.com'
        }
      ],
      isAboutVisible: false,
      selectedStudent: ''
    }

  }


  handleClick(items) {
    this.setState({
      isAboutVisible: false
    });
    this.state.students.map(student => {
      //const { id, name, age, email } = student;

      if (items === student.id) {

        this.setState({
          isAboutVisible: true,
          selectedStudent: student
        });


      }
      return student;
    });



  }



  renderTableData() {

    return this.state.students.map((student) => {
      const {
        id,
        name
      } = student //destructuring
      return ( <
        tr onClick = {
          () => {
            this.handleClick(student.id)
          }
        }
        key = {
          id
        } >


        <
        td > {
          name
        } < /td>

        <
        /tr>
      )
    })
  }




  render() {


    return (


      <
      div >

      <
      h1 id = 'title' > React Dynamic Table < /h1>

      <
      table id = 'students' >
      <
      tbody > {
        this.renderTableData()
      } <
      /tbody> < /
      table >



      {
        this.state.isAboutVisible ? < Sidebar1 abc = {
          this.state.selectedStudent
        }
        handleClose = {
          this.handleClose
        }
        /> : null } < /
        div >

      );
    }
  }






  export default App;

以下是Sidebar1。

import React from 'react';
import Sidebar from "react-sidebar";
import './Sidebar1.css'

class Sidebar1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebarOpen: true,
    };
    this.onSetSidebarOnpen = this.onSetSidebarOpen.bind(this);

  }


  onSetSidebarOpen(open) {
    this.setState({
      sidebarOpen: open
    });
  }


  render() {
    return (
          <div className="help">
              <Sidebar sidebar={<div><p>Name : {this.props.abc.name}</p><p> Age : {this.props.abc.age}</p> <p>Email : {this.props.abc.email}</p></div>   }
          rootClassName="xyz"
                sidebarClassName="imp"      

            open={this.state.sidebarOpen}
            onSetOpen={this.onSetSidebarOpen}
                    pullRight                
                    styles={{ sidebar: { background: "beige",width:300,paddingLeft :5},overlay : {width:0} }}

          >        

          </Sidebar>

          </div> 
        );
  }
}

export default Sidebar1

标签： reactjs

解决方案

您是否尝试过优化您的handleClick功能 - ：

  handleClick(items){   
   this.setState({
     isAboutVisible:true,
     selectedStudent: this.state.students.find(student => items === student.id)
   });
  }

同样为了理智，我们可以添加此条件，以便Sidebar1每次状态selectedStudent更改时都会刷新组件。

(this.state.selectedStudent && <Sidebar1 abc={this.state.selectedStudent} handleClose={this.handleClose}/>)

根本原因是抽屉的宽度对你来说是个障碍，我们需要SideBar像这样为组件设置样式-：

<Sidebar
          sidebar={
            <div>
              <p>Name : {this.props.abc.name}</p>
              <p> Age : {this.props.abc.age}</p>{" "}
              <p>Email : {this.props.abc.email}</p>
            </div>
          }
          rootClassName="xyz"
          sidebarClassName="imp"
          open={this.state.sidebarOpen}
          onSetOpen={this.onSetSidebarOpen}
          pullRight
          styles={{
            sidebar: {
              background: "beige",
              width: 300,
              paddingLeft: 5,
            },
            overlay: { width: 0 },
            root: { left: "none", width: "60%" },
          }}
        >
</Sidebar>

基本上我们需要root: {left: "none", width: "60%"}在styles

推荐阅读