ReactJS：當另一個組件中的 state 屬性值為某個值時，如何更改一個組件中的 state 屬性值

Question

我正在開發一個 React 應用程序，我正在使用 Redux 來存儲 state。 我有以下代碼。

menu.component.jsx：

import React, { Component } from 'react';
import { connect } from 'react-redux';

import MenuCategory from '../../components/menu-category/menu-category.component'
import NewCategoryButton from '../../components/new-category-button/new-category-button.component';
import EditMenuButton from '../../components/edit-menu-button/edit-menu-button.component';

import './menu.styles.scss';

class MenuPage extends Component {

    state = {
        menuEditable: false
    }

    render() {

        return (
            <div className='menu-page'>
                {this.props.menu ? this.props.menu.map(category => <MenuCategory key={category._id} {...category} />) : null}
                <div className='edit-menu-buttons'>
                    <div className='menu-button'>
                        {this.props.currentUser ? <NewCategoryButton /> : null}
                    </div>
                    <div className='menu-button'>
                        {this.props.currentUser ? <EditMenuButton /> : null}
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    currentUser: state.user.currentUser,
    menu: state.menu
})

export default connect(mapStateToProps)(MenuPage);

編輯菜單按鈕.component.jsx：

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Button from '../button/button.component';

class EditMenuButton extends Component {

    state = {
        text: "Edit Menu"
    }

    changeText = () => {
        const { text } = this.state;
        if(text === "Edit Menu") {
            this.setState({text: "Save Edits"});
        } else {
            this.setState({text: "Edit Menu"});
        }
    }

    render() {
        const { text } = this.state;

        return (
            <Button onClick={ () => { this.changeText()} } style={{ backgroundColor: text === "Save Edits" ? "#b9edee" : "#222222", color: text === "Save Edits" ? "#000000" : "#ffffff", border: text === "Save Edits" ? "none" : "1px solid #222222"}}>{text}</Button>
        );
    }
}

export default (EditMenuButton);

我有一個 EditMenuButton 組件，它有一個 state 和一個text屬性，還有一個 MenuPage 組件，它有一個 state 和一個menuEditable屬性。

當 EditMenuButton 組件中的text屬性值為'Save Edits'時，我希望 MenuPage 組件中的menuEditable屬性值為true 。

我有構成 Redux 存儲的應用程序組件外部的數據（例如，使用createStore()函數）。 但是，當 state 位於組件內部時，我不確定如何更改 state 屬性值，例如 MenuPage 和 EditMenuButton 組件。 任何見解都值得贊賞。

Answer 1

通常它在 React 中的最佳實踐是將 state 存儲在父母中，並通過道具將其傳遞給孩子，重點是為您的應用程序的 state 提供一個單一的事實來源。

考慮只在menuEditable中有MenuPage ，並通過道具將其傳遞給MenuButton ：

class MenuPage extends Component {

    state = {
        menuEditable: false
    }

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

    render() {

        return (
            <div className='menu-page'>
                {this.props.menu ? this.props.menu.map(category => <MenuCategory key={category._id} {...category} />) : null}
                <div className='edit-menu-buttons'>
                    <div className='menu-button'>
                        {this.props.currentUser ? <NewCategoryButton /> : null}
                    </div>
                    <div className='menu-button'>
                        {this.props.currentUser ? <EditMenuButton onClick={this.toggleMenuEditable} isEditing={this.state.menuEditable} /> : null}
                    </div>
                </div>
            </div>
        )
    }
}

您的 EditMenuButton 現在可以顯着簡化。 您需要進行兩項更改：刪除 state 並改用isEditing道具，並將onClick道具傳遞給 HTML 按鈕

class EditMenuButton extends Component {
    render() {
        const { isEditing, onClick } = this.props;

        return (
            <Button onClick={onClick} style={{ backgroundColor: isEditing ? "#b9edee" : "#222222", color: isEditing ? "#000000" : "#ffffff", border: isEditing ? "none" : "1px solid #222222"}}>{isEditing ? "Save Edits" : "Edit Menu" }</Button>
        );
    }
}

您的EditMenuButton現在不必擔心管理 state，它只會對進入其中的道具做出反應，這將使其更易於使用（更少考慮）並且不易出現錯誤。 您甚至可以通過使其成為 function 組件來進一步簡化此操作。

Answer 2

在父組件中創建 function 以更新 state 並將其傳遞給子組件。 在您的父組件中聲明：

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

將其作為 prop 傳遞給子組件，並在 changeText function 中調用。

像這樣的東西：

changeText = () => {
    const { text } = this.state;
    if(text === "Edit Menu") {
        this.setState({text: "Save Edits"});
        this.props.toggleMenuEditable();

    } else {
        this.setState({text: "Edit Menu"});
    }
}