对多个组件使用一个react状态

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [state, setState] = useState('');

  const handleChange = (value) => {
    setState(value);
  };

  return (
    <div>
      <ChildComponent state={state} onChange={handleChange} />
    </div>
  );
};

export default ParentComponent;

import React from 'react';

const ChildComponent = ({ state, onChange }) => {
  const handleInputChange = (e) => {
    onChange(e.target.value);
  };

  return (
    <div>
      <input type="text" value={state} onChange={handleInputChange} />
    </div>
  );
};

export default ChildComponent;

// actions.js
export const updateState = (value) => ({
  type: 'UPDATE_STATE',
  payload: value,
});

// reducers.js
export const initialState = '';
export const stateReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_STATE':
      return action.payload;
    default:
      return state;
  }
};

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { stateReducer, initialState } from './reducers';
import ParentComponent from './ParentComponent';

const store = createStore(stateReducer, initialState);

const App = () => (
  <Provider store={store}>
    <ParentComponent />
  </Provider>
);

export default App;

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateState } from './actions';

const ChildComponent = () => {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();

  const handleInputChange = (e) => {
    dispatch(updateState(e.target.value));
  };

  return (
    <div>
      <input type="text" value={state} onChange={handleInputChange} />
    </div>
  );
};

export default ChildComponent;