双向绑定：子组件数据改变时，父组件数据同时改变

2023-11-14 08:02:33

在React中，实现父子组件通信双向绑定，常用的方法有两种：

使用中间人组件：
在父子组件之间引入一个中间人组件，作为数据的桥梁。当子组件的数据发生改变时，中间人组件会通过props将改变的数据传递给父组件，同时更新自己的状态。父组件通过props监听中间人组件的状态变化，从而实现双向绑定。
使用自定义Hook：
React中提供了自定义Hook机制，允许开发者创建自己的Hook函数，用于在组件之间共享状态。通过自定义Hook，可以实现父子组件通信双向绑定。

本文将使用自定义Hook的方法实现父子组件通信双向绑定。

首先，我们需要定义一个自定义Hook，用于共享数据。

import { useState, useEffect } from "react";

const useSharedState = (initialValue) => {
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    // 当父组件数据发生改变时，更新子组件数据
    setState(initialValue);
  }, [initialValue]);

  return [state, setState];
};

然后，在父组件中使用自定义Hook共享数据。

import { useSharedState } from "./useSharedState";

const ParentComponent = () => {
  const [sharedState, setSharedState] = useSharedState(0);

  const handleParentInputChange = (event) => {
    setSharedState(event.target.value);
  };

  return (
    <div>
      <input type="text" value={sharedState} onChange={handleParentInputChange} />
      <ChildComponent sharedState={sharedState} />
    </div>
  );
};

在子组件中使用共享数据。

import { useSharedState } from "./useSharedState";

const ChildComponent = ({ sharedState }) => {
  const [, setSharedState] = useSharedState(0);

  const handleChildInputChange = (event) => {
    setSharedState(event.target.value);
  };

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