Question

我有一个搜索表单，其中包含很多搜索组件和一个List容器组件，其中包含用于显示搜索结果的Item组件。当我单击选定的项目时，它会弹出一个“详细信息”组件。现在，一切正常，除非单击“详细信息”组件内的“关闭”按钮，否则窗体将重置并且项目列表也消失。 “关闭”按钮应仅关闭“详细信息”组件，以便我可以在列表中选择其他项目进行查看。我的代码有什么问题？谢谢。 App.js

class App extends Component  {
state={ showPopup: false,
    selectedItem:'',
    Items:[]};
  togglePopup=()=> {  
this.setState({  

showPopup: !this.state.showPopup  
});  
 }  
onItemseSelect=(item)=>{
this.setState({selectedItem:item});
};

render(){
const Items=['aa','bb','cc'];
return(

<List 
Items={this.state.Items}
onItemSelect={this.onItemSelect}
onClick={this.togglePopup}
/>


{this.state.showPopup ?  
<Detail  
  item={this.state.selectedItem}
  closePopup={this.togglePopup.bind(this)}  
/>  
: null  
}  

);
}
}

List.js

import React  from 'react';
import Item from './Item';

const List=({Items,onItemSelect})=>{
    const renderedList= Items.map(item=>{
    return (
    <Item key={item.ID} item={item} onItemSelect={onItemSelect}  />
    );
})
return <div>

{renderedList}</div>
}

export default List;

Item.js

import React from 'react';
const Item=({item, onItemSelect})=>{
    return <div  onClick={()=>onItemSelect(item)} >
<div class="content">
<div class="header">
 {/*display contents*/}
View More
</div>
</div>
};
export default Item;

Detail.js

import React from 'react';

const Detail=({item,closePopup})=>{
    if (!item){
    return <div>loading</div>
    }

   return (
    <div className='popup'>
    <div className='popup_inner'>
     <p>
     {/*contents here*/}
     </p>

    <button onClick={()=>closePopup}>close me</button>
  </div>
</div>);
 };
export default Detail;

css代码：

.popup {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(0,0,0, 0.5);
}
.popup_inner {
position: absolute;
left: 25%;
right: 25%;
top: 25%;
bottom: 25%;
margin: auto;
background: white;
}

无错误信息。表单将重置为原始状态。

Answer 1

我认为问题仅在这里，我怀疑您的列表项是如何仅在第一次呈现。

Items:[]

render(){
const Items=['aa','bb','cc']; //static values which are not in use
return(

<List 
Items={this.state.Items} //You are using state which is blank
onItemSelect={this.onItemSelect}
onClick={this.togglePopup}
/>
...
)
}

完成Running code就是这样。

关闭子组件后如何防止父组件状态重置为原始状态

1 个答案: