如何从自定义 React-Select MenuList 组件调用父组件方法（或状态提升）？

Question

我在 React-Select 元素的底部创建了一个自定义 MenuList 按钮（“添加新用户”），以允许将另一个用户添加到 select 列表。但是，我无法弄清楚如何在创建新用户后处理该事件。下面的 codesandbox 包含一个简化版本。具体来说，第 29 行 this._loadData(randomId) 没有访问父组件的 this 的范围（很明显）。我的问题是，如何添加“handleEvent”属性以便我可以将状态提升到此自定义 MenuList 组件的父组件？

允许用户添加新 AppUser 的自定义 MenuList 组件的代码片段：

const MenuButtonAddNewUser = (props) => {
  return (
    <components.MenuList {...props}>
      {props.children}
      <div className="border-top text-center py-2">
        <a
          href="showModalUrl.action"
          onClick={(event) => {
            event.preventDefault();

            // Simluate opening a modal and adding a user
            let randomId = Math.floor(Math.random() * (10 - 4 + 1)) + 4;
            console.log(
              "Simluate loading modal and adding a user with id: " + randomId
            );

            // Tell parent componenent to reload the options from the database
            // and auto-select the new user
            // How do I gain access to "_loadData"???
            //this._loadData(randomId);
            console.log(
              "User added. Call 'this.loadData(" + randomId + ")' here!!"
            );
          }}
        >
          <i className="fa fa-fw fa-user-plus mr-1" /> Add New Agent
        </a>
      </div>
    </components.MenuList>
  );
};

Answer 1

我不熟悉 react-select 的 API，但是您可以采用的一种方法是将 class 组件转换为函数组件。然后您可以将 MenuButtonAddNewUser 组件移动到 App 组件中，这将使其能够访问 App 可以访问的所有内容。

CodeSandbox link 建议：https://codesandbox.io/s/react-select-custom-event-handler-forked-n0v21o?file=/src/App-Hooks.js

如何从自定义 React-Select MenuList 组件调用父组件方法（或状态提升）？

How to call a parent component method (or lift of state) from a custom React-Select MenuList component?

javascript

reactjs

react-select