React技术问题：如何通过子组件数据更新父组件state

嘿，我懂你现在的困扰——React里单向数据流的规则确实会让刚接触的人有点懵，不过解决这个问题的核心思路其实很清晰：父组件给子组件传一个回调函数，子组件需要更新数据时就调用这个函数，把新值传回去，让父组件自己更新state。

我结合你的场景给你拆解具体步骤：

1. 在父类组件MenuContainer里定义更新state的回调 #

首先，在你的MenuContainer类组件中，写一个专门用来更新itemName的方法，记得绑定this避免指向问题：

class MenuContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      itemName: '' // 你的默认空字符串
    };
    // 绑定this，不然回调里的this会指向undefined
    this.updateItemName = this.updateItemName.bind(this);
  }

  // 这个方法就是用来接收子组件传过来的新值，更新父组件state的
  updateItemName(newItemName) {
    this.setState({
      itemName: newItemName
    });
  }

  // ... 你的其他逻辑，比如渲染表格、子组件之类的
}

2. 把回调函数作为props传给需要的子组件 #

不管是你用来渲染菜单的子函数组件，还是ItemName子组件，只要需要更新父组件的itemName，就把这个updateItemName方法传过去：

比如传给菜单子组件（假设你的菜单子组件叫MenuRenderer）：

<MenuRenderer 
  menuList={this.props.menuList} // 你原来传递的表格数据
  onItemClick={this.updateItemName} // 把回调传进去
/>

如果是ItemName子组件需要更新的话：

<ItemName 
  itemName={this.state.itemName} // 原来的itemName props
  onUpdateName={this.updateItemName} // 同样传回调
/>

3. 在子组件里调用回调更新父组件state #

场景一：菜单子组件点击时更新 #

你的菜单子组件是把menuList映射成菜单项，只渲染icon，那你可以给每个菜单项加点击事件，点击时把对应的item名字传给父组件的回调：

function MenuRenderer({ menuList, onItemClick }) {
  return (
    <div className="menu-container">
      {menuList.map((menuItem) => (
        <div 
          key={menuItem.id} 
          onClick={() => onItemClick(menuItem.name)} // 点击时把当前项的name传回去
          className="menu-item"
        >
          {menuItem.icon}
        </div>
      ))}
    </div>
  );
}

场景二：ItemName子组件主动更新 #

如果ItemName子组件里有输入或者其他交互要修改itemName，比如一个输入框：

function ItemName({ itemName, onUpdateName }) {
  return (
    <div className="item-name">
      <input
        type="text"
        value={itemName}
        onChange={(e) => onUpdateName(e.target.value)} // 输入变化时把新值传回去
        placeholder="请输入项目名称"
      />
    </div>
  );
}

为啥这个方法管用？ #

React的数据流是单向的，子组件不能直接修改父组件的state，但父组件可以把自己的方法传给子组件，子组件调用这个方法就相当于通知父组件“我要更新这个值啦”，由父组件自己去修改state，这完全符合React的设计原则，也能保证数据流向清晰，不容易出bug。

如果之后你换成Hook组件，思路也是类似的，用useState定义状态，用useCallback优化回调传递就行，不过你现在用类组件，上面的方案完全够用～

内容的提问来源于stack exchange，提问作者Norweski Drwal