如何在 ReactJS 功能组件中触发子方法

Question

我有一些内联编辑字段，单击保存应该触发使用其他属性执行 API 调用的子方法。当前使用 useState 设置标志，但它只工作一次，如果我重新提交它不起作用，而是我想使用该方法。

Answer 1

只是想添加一个反复适用于 useState 的答案。 诀窍是使用不断变化的值而不是布尔值，并在值更改时执行操作：

function Parent() {
const [signal, setSignal] = useState()
const onClick = () => setSignal(Date.now()) // trigger the child to save
return (
<div>
<Child signal={signal} />
<button onClick={onClick}>Save</button>
</div>
}
}
function Child({signal}) {
// send the data whenever signal changes
useEffect(() => {
if (signal != null) {
sendData()
}
}, [signal])
return <div>...</div>
}

Answer 2

从文档中：

使用命令句柄

js useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle自定义公开的实例值 使用父组件时ref.与往常一样，命令性代码使用 在大多数情况下，应避免引用。useImperativeHandle应该是 与forwardRef一起使用：

useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}   }));   return <input ref={inputRef} ... />; }
FancyInput = forwardRef(FancyInput);

在此示例中，呈现<FancyInput ref={inputRef} />的父组件将能够调用inputRef.current.focus()。