React中如何将更新后的值传递给父组件

嘿，这事儿其实是React组件通信里的基础操作啦！核心思路就是父组件给子组件传一个回调函数，子组件更新内容后调用这个函数把新值送回去就行，我给你一步步拆解具体实现：

第一步：在父组件NewArticle里定义回调并传给子组件 #

首先你得在NewArticle里写一个用来更新自身状态的函数，然后把它作为props传递给HoveringMenu。具体代码示例如下：

import React, { useState } from 'react';
import HoveringMenu from './HoveringMenu';
import { Value } from '你的工具包'; // 替换成你实际使用的工具包

const NewArticle = () => {
  // 初始化你需要的content状态
  const initialValue = Value.fromJSON({ 
    document: { 
      nodes: [ 
        { 
          object: 'block', 
          type: 'paragraph', 
          nodes: [ 
            { 
              object: 'text', 
              leaves: [ { text: 'Tell your story...' } ] 
            } 
          ] 
        } 
      ] 
    } 
  });
  const [content, setContent] = useState(initialValue);

  // 定义处理内容更新的回调函数
  const handleContentChange = (newContent) => {
    setContent(newContent); // 用新值更新父组件的状态
  };

  return (
    <div>
      {/* 把当前content和回调函数都传给子组件 */}
      <HoveringMenu content={content} onContentChange={handleContentChange} />
      {/* 这里可以渲染依赖content的编辑器或其他组件 */}
    </div>
  );
};

export default NewArticle;

第二步：在子组件HoveringMenu里调用回调传递新值 #

当HoveringMenu里的内容发生更新时，你只需要调用父组件传过来的onContentChange函数，把更新后的内容对象传进去就行。比如假设你有一个操作触发了内容更新：

import React from 'react';

const HoveringMenu = ({ content, onContentChange }) => {
  // 举个例子：点击按钮触发内容更新，你可以替换成实际的更新逻辑
  const updateContent = () => {
    // 这里模拟内容更新操作，替换成你工具包的实际更新方法
    const updatedContent = content.set(/* 你的具体更新逻辑 */);
    // 调用父组件的回调，把新值传回去
    onContentChange(updatedContent);
  };

  return (
    <div>
      <button onClick={updateContent}>更新内容</button>
      {/* 子组件的其他内容 */}
    </div>
  );
};

export default HoveringMenu;

小提醒 #

• 一定要保证传递给onContentChange的是正确的Value类型对象，和父组件初始化的initialValue类型一致，这样你的工具包才能正常运转。
• 如果是实时更新场景（比如编辑器输入时），就在对应的输入/变更事件里调用onContentChange即可。

内容的提问来源于stack exchange，提问作者Martin Nordström