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

Question

我是 React 的新手，正在尝试模拟以下场景的更复杂版本：

我有一个具有状态变量的父组件。
我有一个子组件，我将一个函数传递给该子组件，该函数更新父组件中的状态变量。
在我的父函数中，我希望能够重置子函数可能已更改的状态变量。
我希望子函数反映父函数发起的重置。

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

这是我的简单示例：

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

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

Answer 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;

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

How can reset a React child component back to original state after it updates state in the parent

javascript

state

parent-child

rerender

reactjs