這一節主要講解如何把子級發生變化的show，傳遞給父組件。
首先，在子組件Item中的changeList事件中，添加這樣的代碼
注意，this.props.onChange(this.props.index);指的是調用父級傳過來的事件，這個附件在父級是這樣定義的
這樣呢，子級向父級傳值已經實現，但是並沒有實現我們的效果，我們分別在父組件和子組件中打印值。父組件沒有問題，子組件卻又問題。如下所示
這是爲什麼呢，請接着查看下一節。本節具體代碼如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="./data.js"></script>
<style>
.penel{
border: 1px solid #000;
width: 80%;
}
.title{
margin:0;
padding: 10px;
background: #ccc;
}
p.vip{
color:red;
}
p.message{
color:#aaa;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class List extends React.Component{
render(){
return (<ul>
{this.props.list.map(function(val,index){
return (
<li key={index}>
<p className="vip">{val.username}</p>
<p className="message">{val.message}</p>
</li>
)
})}
</ul>)
}
}
class Item extends React.Component{
constructor(){
super(...arguments);
this.state = {
show:this.props.show
}
}
changeList(){
let show = !this.state.show;
this.setState({
show
});
if(show){
console.log("操作其他列表隱藏")
console.log(this.props.onChange);
this.props.onChange(this.props.index);
}
/**
* 1.隱藏當前，不需要改變其他
* 2.展開當前，隱藏其他項的狀態
*/
}
render(){
console.log(this.state.show); //打印之後有問題
return(<div>
<h2 className="title" onClick={this.changeList.bind(this)}>{this.props.data.name}</h2>
{this.state.show?<List list={this.props.data.list} />:""}
</div>)
}
}
class Penel extends React.Component {
constructor(){
super(...arguments);
this.state = {
showList:[true,false,false]
}
this.changeList = this.changeList.bind(this);
}
changeList(i){
// 需要讓當前的第幾個顯示
console.log(i);
let showList = this.state.showList.map(function(val,index){
if(i == index){
return true;
}
return false;
})
this.setState({
showList
});
console.log(this.state.showList); //打印沒問題
}
setShow(){
var list = Object.keys(dataList).map((val,index) => {
return (<Item
data={dataList[val]}
key={index}
show={this.state.showList[index]}
onChange={this.changeList}
index={index}
/>
)
});
return list
}
render(){
return (
<div className="penel">
{this.setShow()}
</div>
);
}
}
ReactDOM.render(
<Penel />,
document.getElementById('app')
);
</script>
</body>
</html>