我试图在数组映射方法中添加更多视图或查看更少的部分,但是当我在map方法内的按钮上使用onclick方法时,所有按钮都是代理而不是特定的按钮。
class Projects extends Component{
constructor(props){
super(props);
this.state={
projects:[
{
id:1,
title:'Calculator',
description:'A Simple Javascript Calculator application'
},
{
id:2,
title:'ColorGuess',
description:'A Javascript application'
},
{
id:3,
title:'GamesDB',
description:'A React application',
},
],
clicked:false
}
this.toggle = this.toggle.bind(this)
}
toggle(){
this.setState( state => ({
clicked:!state.clicked
}));
}
render(){
return(
<div>
<h2>My Projects</h2>
<div className="d-flex flex-wrap justify-content-center">
{
this.state.projects.map( (project, i) =>{
return(
<div key={i} style={{width:'40%'}}>
<div className="card">
{project.title}
<hr/>
Description : {project.description} <br/>
<button onClick={this.toggle}>
{this.state.clicked ? <i class="fas fa-chevron-down"></i> : <i class="fas fa-chevron-up"></i>}
</button>
</div>
</div>
);
})
}
</div>
</div>
);
}
}
当我在渲染后单击单个按钮时,所有其他按钮也起作用而不是特定按钮。
我已经使用了箭头功能并且还传递了索引,但仍然没有工作,不确定它出错了。
不是存储clicked的布尔值,而是存储所单击项目的id并使用它来切换按钮的状态
class Projects extends React.Component{
constructor(props){
super(props);
this.state={
projects:[
{
id:1,
title:'Calculator',
description:'A Simple Javascript Calculator application'
},
{
id:2,
title:'ColorGuess',
description:'A Javascript application'
},
{
id:3,
title:'GamesDB',
description:'A React application',
},
],
clicked:false
}
this.toggle = this.toggle.bind(this)
}
toggle(id){
this.setState( state => ({
clicked: id === state.clicked? null: id
}));
}
render(){
return(
<div>
<h2>My Projects</h2>
<div className="d-flex flex-wrap justify-content-center">
{
this.state.projects.map( (project, i) =>{
return(
<div key={i} style={{width:'40%'}}>
<div className="card">
{project.title}
<hr/>
Description : {project.description} <br/>
<button type="button" onClick={() => this.toggle(project.id)}>
{this.state.clicked === project.id ? 'up' : 'down'}
</button>
</div>
</div>
);
})
}
</div>
</div>
);
}
}
ReactDOM.render(<Projects />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
<div id="root" />
嗯,所以你使用一个状态用于所有组件,每次你设置一个状态时它将在clicked
中使用的this.state.clicked ?
要解决这个问题,你必须为每个按钮保持各个状态。
要解决这个问题,你需要做这样的事情
class Projects extends Component{
constructor(props){
super(props);
this.state={
projects:[
{
id:1,
title:'Calculator',
description:'A Simple Javascript Calculator application'
},
{
id:2,
title:'ColorGuess',
description:'A Javascript application'
},
{
id:3,
title:'GamesDB',
description:'A React application',
},
],
clicked:false
}
this.toggle = this.toggle.bind(this)
}
toggle = (index) => {
const { projects } = this.state;
const update = projects.map((item, key) => {
return index === key ? {
...item,
clicked: !item.clicked
} : {
...item,
};
});
this.setState({
projects: update
});
}
render(){
const { projects } = this.state;
const renderButtons = projects.map( (project, i) => {
return(
<div key={i} style={{width:'40%'}}>
<div className="card">
{project.title}
<hr/>
Description : {project.description} <br/>
<button onClick={(i) => this.toggle(i)}>
{project.clicked ? <i class="fas fa-chevron-down"></i> : <i class="fas fa-chevron-up"></i>}
</button>
</div>
</div>
);
})
return(
<div>
<h2>My Projects</h2>
<div className="d-flex flex-wrap justify-content-center">
{renderButtons}
</div>
</div>
);
}
}