React 子组件在父组件中更新状态后如何将其重置回原始状态

Posted 2023-02-22

【中文标题】React 子组件在父组件中更新状态后如何将其重置回原始状态

【英文标题】：How can reset a React child component back to original state after it updates state in the parent

【发布时间】：2020-04-27 13:28:01

【问题描述】：

我是 React 的新手，并试图模仿以下场景的更复杂版本：

我有一个包含状态变量的父组件。 我有一个子组件，我向它传递了一个函数来更新父组件中的状态变量。 在我的父函数中，我希望能够重置孩子可能已更改的状态变量。 我希望子函数反映由父函数发起的重置。

在我在这里模仿的真实示例中，在第 2 步中，很多事情都会随着状态值的更新而变化，而不仅仅是值的直接更新。我想在我的父级中提供一个“重置”，这反过来应该反映在这个具有范围滑块的子组件中。

这是我的简单示例：

import React,  useState  from "react";

export const App = () => 
  const [rangeValue, setRangeValue] = useState(0)

  const reset = (e) => 
    e.preventDefault()
    setRangeValue(0)//reset state to 0 in App
    //how can I get the initial Position in Range component back to 0?
  

  return (
    <div>
      <p>The range value is: rangeValue</p>
      <Range setRangeValue = setRangeValue/>
      <p><a href="/#" onClick=reset>reset</a></p>
    </div>
  )


const Range = (setRangeValue: setRangeValue) =>

  const handleChange = (event) => 
    setRangeValue(event.target.value)
  
  return (
    <input 
      type="range"
      min="0"
      max="10"
      step="1"
      defaultValue=0
      onChange=(event) => handleChange(event) />
  )


export default App;

这是一个代码沙箱： https://codesandbox.io/s/github/FergusDevelopmentLLC/range-test

实现这样一个想法的正确方法是什么？

【参考方案1】：

您可能希望通过将值从父级传递给它并摆脱默认值来创建您的 Range 组件controlled

import React,  useState  from "react";

export const App = () => 
  const [rangeValue, setRangeValue] = useState(0)

  const reset = (e) => 
    e.preventDefault()
    setRangeValue(0)//reset state to 0 in App
    //how can I get the initial Position in Range component back to 0?
  

  return (
    <div>
      <p>The range value is: rangeValue</p>
      /* pass the value here */
      <Range rangeValue=rangeValue setRangeValue = setRangeValue/> 
      <p><a href="/#" onClick=reset>reset</a></p>
    </div>
  )


const Range = (rangeValue, setRangeValue: setRangeValue) =>

  const handleChange = (event) => 
    setRangeValue(event.target.value)
  
  return (
    <input 
      type="range"
      min="0"
      max="10"
      step="1"
      value=rangeValue // <-- here get the value from parent, when reset it will come down from parent again without whatever value it was reset to
      onChange=(event) => handleChange(event) />
  )


export default App;

【讨论】：

谢谢你，你的帖子让我知道了如何克服这个问题。在我更复杂的版本中，滑块是一个范围：npmjs.com/package/rc-slider 但解决方案是相同的，使用受控版本。