Как сбросить дочерний компонент React обратно в исходное состояние после того, как он обновит состояние в родительском

Я новичок в React и пытаюсь имитировать более сложную версию следующего сценария:

  1. У меня есть родительский компонент с переменной состояния.
  2. У меня есть дочерний компонент, которому я передаю функцию, которая обновляет переменную состояния в родительском компоненте.
  3. В моей родительской функции я хочу иметь возможность сбросить переменную состояния, которую мог изменить дочерний элемент.
  4. Я хочу, чтобы дочерняя функция отражала сброс, инициированный родителем.

В моем реальном примере, который я имитирую здесь, на шаге 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

Как правильно реализовать такую ​​идею?


reactjs javascript state rerender parent-child
person zippyferguson    schedule 09.01.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы хотели бы сделать свой компонент Range управляемым, передав ему значение из родитель и избавление от значения по умолчанию

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;
person Moinul Hossain    schedule 09.01.2020
comment
спасибо, ваш пост дал мне представление о том, как обойти это. В моей более сложной версии ползунок представляет собой диапазон: npmjs.com/package/rc-slider Но решение было тем же — использовать контролируемую версию. - person zippyferguson; 10.01.2020