问将onclick元素从一个数组移动到另一个数组。新数组对象中的内容为空/未复制？

EN

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;

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;

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>
    );
  }
}

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'
  },

];