react使用useContext实现兄弟组件通信

最新推荐文章于 2024-08-02 10:21:35 发布

大拿加拿大

最新推荐文章于 2024-08-02 10:21:35 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/zgrbsbf/article/details/107495183

版权

两个兄弟input通信，实现输入同步

无useReducer版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<article id="app"></article>

<script type="text/jsx">
    let {useContext,useState} = React;

    const AppContext = React.createContext();

    const initialState = {
        inputText: '',
    };

    function Input_one() {
        const {state, setState} = useContext(AppContext);
        return (
            <input value={state.inputText} onChange={e => setState({inputText:e.target.value})}/>
        )
    }

    function Input_two() {
        const {state, setState} = useContext(AppContext);
        return (
            <input value={state.inputText} onChange={e => setState({inputText:e.target.value})}/>
        )
    }

    function App() {
        const [state,setState] = useState(initialState);
        return (
            <React.Fragment>
                <AppContext.Provider value={{state, setState}}>
                    <Input_one/>
                    <Input_two/>
                </AppContext.Provider>
            </React.Fragment>
        );
    }

    ReactDOM.render(
        <App/>,
        document.getElementById("app")
    );
</script>
</body>
</html>

有useReducer版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<article id="app"></article>

<script type="text/jsx">
    let {useContext, useReducer} = React;

    const AppContext = React.createContext();

    const initialState = {
        inputText: '',
    };

    function reducer(state, action) {
        console.log('reducer',arguments);
        switch (action.type) {
            case 'UPDATE_INPUT':
                return {
                    inputText: action.data
                };
            default:
                return initialState;
        }
    }

    function Input_one() {
        const {state, dispatch} = useContext(AppContext);
        const changeInputValue = (newValue) => {
            dispatch({type: 'UPDATE_INPUT', data: newValue,});
        };

        return (
            <input value={state.inputText} onChange={e => changeInputValue(e.target.value)}/>
        )
    }

    function Input_two() {
        const {state, dispatch} = useContext(AppContext);
        const changeInputValue = (newValue) => {
            dispatch({type: 'UPDATE_INPUT', data: newValue,});
        };
        return (<input value={state.inputText} onChange={e => changeInputValue(e.target.value)}/>)
    }

    function App() {
        const [state, dispatch] = useReducer(reducer, initialState);
        return (
            <React.Fragment>
                <AppContext.Provider value={{state, dispatch}}>
                    <Input_one/>
                    <Input_two/>
                </AppContext.Provider>
            </React.Fragment>
        );
    }


    ReactDOM.render(
        <App/>,
        document.getElementById("app")
    );
</script>
</body>
</html>