我有一个类似这样的钩子组件:
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>)
}
我想重置父组件的值。如何调用父组件的纯净值?父组件是有状态组件。
答案 0 :(得分:2)
您不能/不应该。使用钩子代替有状态的类组件不会改变以下事实:如果希望父级拥有状态,则需要在父级中声明状态。
它应该看起来像这样,具体取决于您何时要重置值(在这里我使用了另一个按钮):
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 :(得分:1)
如果父级必须控制子级状态,则该状态可能必须驻留在父级组件本身中。但是,您仍然可以使用ref从父级更新子状态,并在子级中公开一个reset方法。您可以利用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 :(得分:1)
来自关于Fully uncontrolled component with a key的React文档:
为了重置值...,我们可以使用名为
key
的特殊React属性。当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"/>