Изменить состояние ответа от родительского компонента - PullRequest
Новая
       13

Изменить состояние ответа от родительского компонента

2 голосов
/ 28 апреля 2019

У меня есть такой крючок: 

import React, { useState} from "react";

    const MyComponent = props => {
      const [value, setValue] = useState(0);
      const cleanValue = () => {
        setValue(0);
      };

      return (<span><button onClick={()=>setValue(1)}/>{value}<span>)
    }

Я хочу сбросить значение с родительского компонента. Как я могу назвать чистое значение из родительского компонента? родительский компонент является компонентом с состоянием.

Ответы [ 3 ]

2 голосов
/ 28 апреля 2019

Если родитель должен контролировать дочернее состояние, то, вероятно, состояние должно находиться в самом родительском компоненте. Однако вы все равно можете обновить дочернее состояние от parent, используя ref и выставив метод reset в child. Вы можете использовать хук useImperativeHandle, чтобы позволить ребенку открывать только определенные свойства для родителя 

const { useState, forwardRef, useRef, useImperativeHandle} = React;


const Parent = () => {
  const ref = useRef(null);
  return (
     <div>
      <MyComponent ref={ref} />
      <button onClick={() => {ref.current.cleanValue()}} type="button">Reset</button>
     </div>
  )
}

const MyComponent = forwardRef((props, ref) => {
  const [value, setValue] = useState(0);
  
   const cleanValue = () => {
    setValue(0);
  };

  useImperativeHandle(ref, () => {
     return {
      cleanValue: cleanValue
     }
  });

  return (<span><button type="button" onClick={()=>setValue(1)}>Increment</button>{value}</span>)
});
ReactDOM.render(<Parent />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
2 голосов
/ 28 апреля 2019

Вы не можете / не должны.Использование хуков вместо компонентов класса с состоянием не меняет того факта, что если вы хотите, чтобы родитель владел этим состоянием, вам нужно объявить это состояние в родительском.

Это должно выглядеть примерно так, в зависимости от того, когдаВы хотите сбросить значение (здесь я использовал другую кнопку): 

const MyButton = (props) = (
  // Whatever your button does, e.g. styling
  <span>
    <button {...props} />
  <span>
)


const Parent = props => {
  const [value, setValue] = useState(0);
  const cleanValue = () => setValue(0);
  return (
    <div>
      <MyButton onClick={() => setValue(1)}>
        {value}
      </MyButton>
      <button onClick={cleanValue}>
        Reset
      </button>
    </div>
  )
}
1 голос
/ 28 апреля 2019

Из документации React о Полностью неконтролируемый компонент с ключом :

Чтобы сбросить значение ..., мы можем использовать специальный атрибут React, называемый key.Когда key изменяется, React будет создавать новый экземпляр компонента, а не обновлять текущий .Ключи обычно используются для динамических списков, но также полезны и здесь.

В этом случае мы можем использовать простой счетчик, чтобы указать необходимость нового экземпляра MyComponent после нажатия Resetкнопка: 

const { useState } = React;

const Parent = () => {
  const [instanceKey, setInstanceKey] = useState(0)
  const handleReset = () => setInstanceKey(i => i + 1)
  return (
   <div>
    <MyComponent key={instanceKey} />
    <button onClick={handleReset} type="button">Reset</button>
   </div>
  )
}

const MyComponent = () => {
  const [value, setValue] = useState(0)
  return (
    <span>
      <button type="button" onClick={()=>setValue(v => v + 1)}>{value}</button>
    </span>
  )
};

ReactDOM.render(<Parent />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"/>
...