【React】React18 Hooks 之 forwardRef useImperativeHandle

import React, { useImperativeHandle, forwardRef } from 'react';
 
// 自定义 Hooks 用于处理表单数据
function useFormData(initialData) {
  const [data, setData] = React.useState(initialData);
 
  // 通过 useImperativeHandle 暴露给父组件的方法
  useImperativeHandle(
    // ref 对象
    null,
    () => ({
      getData: () => data,
      setData: (newData) => setData(newData),
    }),
    [data]
  );
 
  // 其他的 Hooks 逻辑...
}
 
// 自定义组件
const MyForm = forwardRef((props, ref) => {
  const formData = useFormData(props.initialData);
 
  // 处理表单提交...
 
  // 通过 ref 暴露数据和方法
  useImperativeHandle(ref, () => formData, [formData]);
 
  return (
    <form>
      {/* 表单元素 */}
    </form>
  );
});
 
// 使用 MyForm 组件
class App extends React.Component {
  formRef = React.createRef();
 
  handleSubmit = () => {
    if (this.formRef.current) {
      console.log(this.formRef.current.getData());
    }
  };
 
  render() {
    return (
      <>
        <MyForm ref={this.formRef} initialData={{}} />
        <button onClick={this.handleSubmit}>Submit</button>
      </>
    );
  }
}
 
export default App;

这个例子中，我们创建了一个自定义 Hook useFormData 用于处理表单数据，并通过 forwardRef 和 useImperativeHandle 使得父组件能够访问和操作这些数据。然后我们定义了一个 MyForm 组件，它使用了这个 Hook 并通过 ref 暴露了数据和方法。最后，在 App 组件中，我们创建了一个 ref 并将它传递给 MyForm 组件，同时提供了一个按钮用于提交表单，并在点击事件中打印出表单数据。