从父组件改变React Hook状态

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

我想要从父组件中重置数值。我该如何调用父组件的清除数值方法？父组件是一个有状态组件。

- Hadi Ranjbar

Answer 1

如果父组件需要控制子组件的状态，则该状态必须驻留在父组件本身中。然而，您仍然可以使用 ref 和在子组件中公开 reset 方法来更新子组件的状态。您可以利用 useImperativeHandle hook，使子组件只向父组件公开特定属性。

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

- Shubham Khatri

---

在我看来，这似乎是针对派生状态情况的 Hook 解决方法，而且你可能不需要派生状态，所以我使用了其中一项建议来发布我的答案...但是，在更复杂的情况下，当状态存储必须存在于某个命令式库中时，useImperativeHandle可能会很有用。 - Aprillion

对于想要使用本答案方法的TypeScript用户，以下是一种推断命令句柄类型数据的方法：https://gist.github.com/Venryx/7cff24b17867da305fff12c6f8ef6f96 - Venryx

Answer 2

关于带有键的完全不受控制组件的React文档：

为了重置值...，我们可以使用特殊的React属性称为key。当key改变时，React会创建一个新的组件实例而不是更新当前实例。键通常用于动态列表，但在这里也很有用。

在这种情况下，我们可以使用一个简单的计数器来指示在按下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"/>

- Aprillion

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

- Matthieu Libeer

---

那么，如何重置这个值？我只想要将它重置。 - Hadi Ranjbar

如果可能的话，这将是更可取的解决方案，即Lifting State Up - 但实际上可以创建一个子组件的新实例（相当于重置 - 参见我的答案）。 - Aprillion