时间戳

首页 > 解决方案 > 从父组件更改反应钩子状态

reactjs - 从父组件更改反应钩子状态

问题描述

我有一个像这样的钩子组件：

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>)
}

我想从父组件重置值。如何从父组件调用干净的值？父组件是有状态的组件。

标签： reactjsreact-hooks

解决方案

如果父组件必须控制子状态，那么该状态可能必须驻留在父组件本身中。但是，您仍然可以使用 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"/>

推荐阅读