从父组件更改反应挂钩状态

Question

我有这样一个钩子组件：

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

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

Answer 1

你不能/不应该。使用钩子而不是有状态的 class 组件不会改变这样一个事实，即如果您希望父级拥有状态，则需要在父级中声明状态。

它应该看起来像这样，具体取决于您何时要重置该值（这里我使用了另一个按钮）：

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

Answer 2

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

Answer 3

来自关于 Fully uncontrolled component with a key 的 React 文档：

In order to reset the value ..., we can use the special React attribute called key. When a key changes, 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.

在这种情况下，我们可以使用一个简单的计数器来指示在按下 Reset 按钮后需要一个新的 MyComponent 实例：

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"/>

从父组件更改反应挂钩状态

Change react hook state from parent component

reactjs

react-hooks