Question

我目前正在尝试在我的CARD.js文件中编写handleClick（）函数的代码。我试图在单击删除按钮时删除卡。我为此感到苦恼，因为需要更改的状态在我的HOME文件中，而不是在我的handleclick函数所在的CARD文件中。我应该在我的handleclick函数（CARD文件）中使用什么代码来过滤（=删除）HOME文件中的状态？您如何进行此链接或无法链接？

HOME.js

import React, { PureComponent } from 'react'
import {movies} from "./movies.js"
import Card from "./Card.js"
import "./Home.css"

class Home extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            movieslist: movies   
        }
    }

    render() {
        return (
            <div className="homecontainer">
                {
                    this.state.movieslist.map(movie =>{
                       return <Card title={movie.title} category={movie.category} likes={movie.likes} dislikes={movie.dislikes} />
                    })
                }
            </div>
        )
    }
}

export default Home

CARD.js

import React, { PureComponent } from 'react'
import "./Card.css"

class Card extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            active:false
        }

        this.toggleClass=this.toggleClass.bind(this)
    }

    toggleClass(){
        const currentState = this.state.active;
        this.setState({ active: !currentState });
    }

    handleClick(){
        // How do I link this with the state in the HOME file
    }

    render() {
        return (
                <div className="cardbox">
                    <div className="cardtitle">{this.props.title}</div>
                    <div>{this.props.category}</div>
                    <div>{this.props.likes / this.props.dislikes}</div>
                    <i onClick={this.toggleClass} className={this.state.active?"fa fa-thumbs-up":"fa fa-thumbs-down"}></i>
                    <button onClick={this.handleClick}>Delete</button>
                </div>    
        )
    }
}

export default Card

Answer 1

React具有一种数据流方式，因此您需要在home组件中编写一个更改状态的函数，然后将该函数传递给card.js组件。

删除按钮-使用handleClick更改状态

1 个答案: