React组件之间的双向绑定

import React, { useState } from 'react';

function InputComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

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

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

function ParentComponent() {
  const [value, setValue] = useState('');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { value, setValue } = useContext(MyContext);

  return (
    <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
  );
}

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

function InputComponent() {
  const value = useSelector(state => state.value);
  const dispatch = useDispatch();

  const handleChange = (event) => {
    dispatch(updateValue(event.target.value));
  };

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