在 React 中获取父级过去的值

在 React 中，组件之间的通信是通过 props 进行的。父组件可以向子组件传递数据，但是子组件不能直接修改父组件的值。当子组件需要访问父组件的过去值时，需要使用一些技巧来实现。

父子组件通信

在 React 中，组件之间的通信通常是通过 props 进行的。父组件可以向子组件传递数据，子组件可以通过 props 来访问这些数据，但是子组件不能直接修改这些数据。如果需要更新数据，子组件需要向父组件发送一个请求，让父组件修改数据并重新渲染组件树。

以下是一个简单的示例，演示了如何在父组件中向子组件传递数据：

import React from 'react';

function Parent() {
  const data = 'hello';

  return (
    <Child data={data}/>
  );
}

function Child(props) {
  return (
    <div>{props.data}</div>
  );
}

在这个例子中，父组件 Parent 传递了一个字符串 hello 给子组件 Child。子组件通过 props 属性来访问这个字符串，并在界面上将其显示出来。

访问父组件的过去值

假设我们有一个场景：父组件从后端获取了一些数据，并向子组件传递了这些数据。子组件展示了这些数据，并且允许用户对数据进行修改。修改后的数据应该提交给后端，并更新父组件的值。但是，如果用户取消了修改，那么子组件需要恢复原先的值。此时，子组件需要访问父组件的过去值。

方法如下：

在父组件中，定义一个状态 prevData，用于存储过去的数据。当子组件需要更新数据时，将当前数据保存到 prevData 中。如果用户取消修改，可以从 prevData 中读取出原先的数据。以下是示例代码：

import React, { useState } from 'react';

function Parent() {
  const [data, setData] = useState('hello');
  const [prevData, setPrevData] = useState(data);

  function onUpdate(newData) {
    // 保存当前数据到 prevData 中
    setPrevData(data);

    // 更新父组件的数据
    setData(newData);
  }

  function onCancel() {
    // 恢复原先的值
    setData(prevData);
  }

  return (
    <>
      <Child data={data} onUpdate={onUpdate} onCancel={onCancel}/>
    </>
  );
}

function Child(props) {
  const [data, setData] = useState(props.data);

  function onChange(e) {
    setData(e.target.value);
  }

  function onSave() {
    props.onUpdate(data);
  }

  function onReset() {
    setData(props.data);
  }

  return (
    <>
      <input type="text" value={data} onChange={onChange}/>
      <button onClick={onSave}>保存</button>
      <button onClick={props.onCancel}>取消</button>
      <button onClick={onReset}>重置</button>
    </>
  );
}

在这个例子中，父组件 Parent 定义了两个状态 data 和 prevData，用于保存当前和过去的数据。子组件 Child 接收 data、onUpdate 和 onCancel 三个 props。data 表示当前数据的值，onUpdate 函数用于更新父组件的数据，onCancel 函数用于取消修改。Child 组件自己定义了一个状态 data，用于保存用户修改的数据。

当用户点击“保存”按钮时，Child 组件调用 onUpdate 函数，向父组件传递当前的数据 data。首先，父组件将当前数据保存到 prevData 中。然后，父组件修改 data 的值为新的数据。如果用户点击“取消”按钮，Child 组件调用 props.onCancel 函数，父组件将值恢复为过去的值。

这样，子组件就可以访问父组件的过去值，实现了在修改数据时的“撤销”功能。

结论

在 React 中，组件之间的通信通常是通过 props 进行的。子组件可以读取父组件传递的数据，但是不能直接修改这些数据。如果子组件需要修改数据，需要向父组件发送一个请求，让父组件修改数据。在某些场景下，子组件需要访问父组件的过去值。为了实现这个功能，可以在父组件中定义一个状态 prevData，保存过去的值。当子组件需要修改数据时，将当前数据保存到 prevData 中。如果用户取消修改，可以从 prevData 中读取出原先的数据。