javascript - 如何告诉父类元素在 ReactJS 中发生了变化？

问题描述

我正在尝试将名为“Others”的列表中的一个元素添加到名为“Favorites”的列表中，反之亦然，一旦我单击“添加到收藏夹”按钮，我对 reactJS 真的很陌生，我正在解决这个纯粹是为了练习目的。

我要做的是创建一个handleClick，将单个联系人的状态从“其他”切换到“收藏”，反之亦然，这是在“用户”组件上完成的，同时调用者是“用户” ” 组件，但是我没有找到一种方法来告诉“用户”组件“用户”已更改并且应该切换列表，这是我现在的代码。

用户

class Users extends Component{
    render(){
            this.props.users.sort(function(a,b){
                if(a.name > b.name){
                    return 1;
                }else{
                    return -1;
                }
            })
            return( 
                <div>
                <h1>Favorites</h1>
                <div>{this.props.users.map(user => <User user={user}
                favList = {true}
                key={user.id}/>)}</div>
                <h1>Others</h1>
                <div>{this.props.users.map(user => <User user={user}
                    favList = {false}
                    key={user.id}/>)}</div>
                </div>
            )   




    }
}

用户

class User extends Component{
    StyleCompleted(){
        return {
            fontSize: '20px',


        }
    }

    constructor(props) {
        super(props);
        this.state = {isToggleOn: this.props.user.isFavorite
        };

        // Este enlace es necesario para hacer que `this` funcione en el callback
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {

    this.setState(state => ({
        isToggleOn: !state.isToggleOn
    }));
    }

    render(){

        const {user} = this.props;
        const {favList} = this.props;
        if (favList==this.state.isToggleOn)
        return (
            <div > 
                <img src={UserImage} alt="userPic"/>
                {user.name} - 
                {user.companyName}
                <button onClick={this.handleClick}>
                    <Star star={
                        this.state.isToggleOn ? 
                        true : false
                    }/>
                </button>

            </div>
            )
        else
            return (<h1>Element changes but is not added</h1>)

    }
}

星星

class Star extends Component{


    render(){
        const {star} = this.props;

        return (
            <img src={
                star ? starTrue : starFalse
            } alt="star"/>
        )
    }
}

当我单击一个元素时的预期结果应该是从当前列表中删除它并将其添加到另一个列表中，实际结果只是对当前节点/元素的更改

标签： javascriptreactjs

javascript - 如何告诉父类元素在 ReactJS 中发生了变化？

问题描述

解决方案

推荐阅读