如何在单击按钮时更新反应上下文提供程序状态

Question

WebContext.js

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

class WebContextProvider extends Component {
    state = {
        inputAmount: 1,
    };

    render() {
        return <WebContext.Provider value={{ ...this.state }}>{this.props.children}</WebContext.Provider>;
    }
}

export default WebContextProvider;

应用程序.js

const App = () => {

return (
        <WebContextProvider>
            <UpdateBtn />
        </WebContextProvider>
    );
};

export default App;

更新Btn.js

const UpdateBtn = () => {

return (
        <Div>
            <Button onClick={} />
        </Div>
    );
};

export default UpdateBtn;

如何在UpdateBtn.js中单击按钮时更新WebContext.js中存在的inputAmount状态？App.js是UpdateBtn.js的父组件另外，如何将WebContext.js转换为功能组件？

Answer 1

您应该传递 Provider 中的函数，您可以调用该函数来更新值：WebContext.js

import React, { createContext, Component } from 'react';

export const WebContext = createContext();

class WebContextProvider extends Component {
    state = {
        inputAmount: 1,
    };

    render() {
        return (
            <WebContext.Provider
                value={{
                    data: ...this.state, // all data now in context.data field
                    update: () => { // we added this callback
                        this.setState((state) => ({
                            inputAmount: state.inputAmount + 1,
                        }));
                    },
                }}
            >
                {this.props.children}
            </WebContext.Provider>
        );
    }
}

export default WebContextProvider;

应用程序.js

const App = () => {

return (
        <WebContextProvider>
            <UpdateBtn />
        </WebContextProvider>
    );
};

export default App;

更新Btn.js

const UpdateBtn = () => {
const context = useContext(WebContext); // we use hook to get context value
return (
        <Div>
            <Button onClick={context.update} /> 
        </Div>
    );
};

export default UpdateBtn;

或者

const UpdateBtn = () => {

// or we can use Consumer to get context value
return (
        <Div>
            <WebContext.Consumer>
              {context => <Button onClick={context.update} />}
            </WebContext.Consumer>
        </Div>
    );
};

export default UpdateBtn;