在 react js 中第二次单击侧边栏时不会更新

Question

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

请帮忙。

我正在使用"反应侧边栏"中的侧边栏

以下是应用程序.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: '[e-mail]'
},
{
id: 2,
name: 'Ali',
age: 19,
email: '[e-mail]'
},
{
id: 3,
name: 'Saad',
age: 16,
email: '[e-mail]'
},
{
id: 4,
name: 'Asad',
age: 25,
email: '[e-mail]'
},
{
id: 5,
name: 'kiwi',
age: 20,
email: '[e-mail]'
}
],
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;

以下是侧边栏1。

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

Answer 1

您是否尝试过优化handleClick函数 -：

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

同样为了健全起见，我们可以添加此条件，以便每次状态更改时selectedStudent刷新Sidebar1组件。

(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>

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