[英]Moving elements onclick from one array to another. Content in new array objects empty / not copied?
Good evening,晚上好,
as a learning project I want to build a simple "Learning Cards" App.作为一个学习项目,我想构建一个简单的“学习卡”应用程序。 The structure is quite simple: you have cards with questions.
结构非常简单:您有带有问题的卡片。 After a button click, you can show the correct solution.
单击按钮后,您可以显示正确的解决方案。 You can also click on "Question solved" to move the learning card to the absolved cards.
您也可以点击“问题已解决”将学习卡移动到已解决的卡上。
I am struggling to realize the "moving the learning card to the absolved" cards part.我正在努力实现“将学习卡移到被赦免”的卡片部分。 I have a "questions" array.
我有一个“问题”数组。 After "onSolvedClick" the solved card gets copied to the "solved" array which is set as the new solved state.
在“onSolvedClick”之后,已解决的卡片被复制到设置为新已解决状态的“已解决”数组中。
When I click on the "Frage gelöst" (question solved) button, a new card appears in the solved questions region.当我单击“Frage gelöst”(问题已解决)按钮时,已解决问题区域中会出现一张新卡片。 The problem is: the new card is empty (without the question / answer).
问题是:新卡是空的(没有问题/答案)。 It would be great if someone could help me at this point!
如果有人能在这一点上帮助我,那就太好了! I already spent hours on this problem today.
我今天已经在这个问题上花了几个小时。
I guess my mistake is within the App.Js code, probably in "onSolvedKlick" or "solveFragen".我想我的错误是在 App.Js 代码中,可能在“onSolvedKlick”或“solveFragen”中。
Thanks a lot!非常感谢!
App.Js:应用程序.Js:
import React, {Component} from 'react';
import CardList from './CardList.js';
import { fragen } from './fragen';
import SearchBox from './SearchBox';
class App extends Component { // As Class to access objects
constructor () {
super();
this.state = { // State needed to change state
fragen: fragen,
solved : [] ,
searchfield: ''
}
}
onSearchChange = (event) => {
this.setState({searchfield: event.target.value});
}
onSolvedKlick = (id) => {
console.log("Klick on solved"+id);
var frage = this.state.fragen.filter(function(e) // Bei Klick auf Solved: filtere aus Ursprungsarray das Element mit gelöster iD
{
return e.id === id;
});
console.log(frage);
const newSolvedArray = this.state.solved.slice();
newSolvedArray.push(frage);
this.setState({solved: newSolvedArray});
}
render(){ // DOM rendering
const filteredFragen = this.state.fragen.filter(fragen =>{
return fragen.frage.toLowerCase().includes(this.state.searchfield.toLowerCase());
})
const solveFragen = this.state.solved;
return(
<div className='tc'>
<h1>Learning Cards</h1>
<SearchBox searchChange={this.onSearchChange}/>
<h2>Cards: To be learned!</h2>
<div>
<CardList fragen={filteredFragen} onSolvedKlick={this.onSolvedKlick}/>
<CardList fragen={solveFragen} onSolvedKlick={this.onSolvedKlick}/>
</div>
</div>
)
}
}
export default App;
CardList.js: CardList.js:
import React from 'react';
import Card from './Card';
const CardList = ({fragen, onSolvedKlick}) => {
const cardComponent = fragen.map( (user, i) => {
return(<Card key={i} id={fragen[i].id} frage = {fragen[i].frage} antwort = { fragen[i].antwort} onSolvedKlick = {onSolvedKlick}/>);
}
)
return (
<div>
{cardComponent}
</div>
);
}
export default CardList;
Card.js: Card.js:
import React, {Component} from 'react';
import 'tachyons';
class Card extends Component {
constructor(props) {
super(props);
this.state = {
frage : props.frage,
showAnswer : false
};
}
_showAnswer = () => {
const before = this.state.showAnswer;
const after = !before;
this.setState({
showAnswer: after
});
}
render() {
return (
<div className ="fl w-50 w-25-m w-20-l pa2 bg-light-red ma3">
<div>
<h2>{this.props.frage}</h2>
{ this.state.showAnswer && (<div>{this.props.antwort}</div>) }
<p></p>
<input type="button" value="Antwort anzeigen" className ="ma2"
onClick={this._showAnswer.bind(null)}
/>
<input type="button" name="solved" value="Frage gelöst" className = "ma2 bg-light-green"
onClick={() =>this.props.onSolvedKlick(this.props.id)}
/>
</div>
</div>
);
}
}
fragen.js (Questions): fragen.js(问题):
export const fragen = [
{
id: 1,
frage: 'What are trends in CPU design?',
antwort: 'Multi-core processors, SIMD support, Combination of core private and shared caches Heterogeneity, Hardware support for energy control',
topic: 'Cloud'
},
{
id: 2,
frage: 'What is typical for multi-core processors?',
antwort: 'Cache Architecture (L1 private to core, L2 private to tile), Cache Coherence',
topic: 'Cloud'
},
{
id: 3,
frage: 'What memory modes exist?',
antwort: 'Flat mode, Cache Mode, Hybrid Mode',
topic: 'Cloud'
},
{
id: 4,
frage: 'What memory modes exist?',
antwort: 'Flat mode, Cache Mode, Hybrid Mode',
topic: 'Cloud'
},
];
Try this on your onSolvedKlick
function:在您的
onSolvedKlick
函数上试试这个:
onSolvedKlick = (id) => {
console.log("Klick on solved"+id);
var frage = this.state.fragen.filter((e) => e.id === id);
this.setState({solved: [...this.state.solved, frage]});
}
Try to avoid so many empty lines.尽量避免这么多空行。 Also keep your code always in english so it's easier for others to understand.
还要保持您的代码始终为英文,以便其他人更容易理解。 I had the luck to be german too :)
我也有幸成为德国人 :)
Assuming that you want to move the questions from fragen
array to solved
array, here is how to do that.假设您想将问题从
fragen
数组移动到已solved
数组,这里是如何做到这一点。
onSolvedKlick = id => {
console.log("Klick on solved" + id);
var elementPos = this.state.fragen.map(function(x) {return x.id; }).indexOf(id); // Find the position of the selected item in the fragen
const currentItem = this.state.fragen.splice(elementPos,1)
const newSolvedArray = this.state.solved;
newSolvedArray.push(currentItem[0]);//splice gives an array
this.setState({ solved: newSolvedArray }, function() {console.log(this.state)});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.