Изменить состояние хука реакции из родительского компонента
У меня есть такой компонент крючка:
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
Вы не можете / не должны. Использование хуков вместо компонентов класса с сохранением состояния не меняет того факта, что если вы хотите, чтобы родитель владел состоянием, вам нужно объявить состояние в родителе.
Это должно выглядеть примерно так, в зависимости от того, когда вы хотите сбросить значение (здесь я использовал другую кнопку):
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>
)
}
когда это возможно, это было бы предпочтительным решением, также известным как Подъем состояния вверх, но на самом деле является можно создать новый экземпляр дочернего компонента (что эквивалентно сбросу - см. мой ответ)
Если родитель должен контролировать дочернее состояние, то, вероятно, состояние должно находиться в самом родительском компоненте. Однако вы все равно можете обновить дочернее состояние от родительского, используя ref и выставив метод сброса в дочернем. Вы можете использовать хук 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"/>ИМХО, это похоже на обходной путь Hook для ситуации с производным состоянием и Вам, вероятно, не нужно производное состояние, поэтому я опубликовал свой ответ, используя 1 из рекомендаций... но useImperativeHandle может быть полезен в более сложных ситуациях, когда хранилище состояний должно жить вне React в какая-то императивная библиотека
Для пользователей TypeScript, желающих использовать подход этого ответа, вот способ вывести данные типа для императивного дескриптора: gist.github.com/Venryx/7cff24b17867da305fff12c6f8ef6f96
Из документации React о Полностью неуправляемый компонент с ключом:
In order to reset the value ..., we can use the special React attribute called
key. When akeychanges, React will create a new component instance rather than update the current one. Keys are usually used for dynamic lists but are also useful here.
В этом случае мы можем использовать простой счетчик, чтобы указать на необходимость нового экземпляра 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"/>
Итак, как сбросить значение? Я просто хочу сбросить его.