网络组件中的反应-select | onChange 事件

Question

我需要在 shadow-root 网络组件中使用 react-select，例如 example。

如何在我的 React 环境中从 <Select> 组件传递 onChange 事件以在状态下使用它：

网络组件：

import * as React from "react";

import ReactDOM from "react-dom";
// import { useState } from "react";
import Select from "react-select";
import retargetEvents from "react-shadow-dom-retarget-events";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";


export class ReactSelect extends HTMLElement {
  createMountPoint() {
    this.mountPoint = document.createElement("div");
    this.attachShadow({ mode: "open" });

    this.shadowRoot.appendChild(this.mountPoint);
  }

  createCache() {
    return createCache({
      container: this.shadowRoot,
      key: "test",
      prepend: false,
    });
  }

  connectedCallback() {
    // Step 1: Create Shadow and Mountpoint
    this.createMountPoint();

    // Step 2: Create emotion Cache
    const cache = this.createCache();

    // Step 3: Render component with `CacheProvider`
    setTimeout(() => {
      ReactDOM.render(
        <CacheProvider value={cache}>
          <Select
            isMulti
            name="time"
            options={timeOptions}
            className="basic-multi-select"
            classNamePrefix="select"
            placeholder={<div>Time</div>}
            onChange={(e) => console.log("select:", e)}
          />
        </CacheProvider>,
        this.mountPoint
      );

      retargetEvents(this.shadowRoot);
    }, 1);

    this.shadowRoot.addEventListener("click", function (e) {
      console.log(this);
    });
  }
}

customElements.get("react-select") ||
  customElements.define("react-select", ReactSelect);

反应：

import { Styled } from "direflow-component";
import PropTypes from "prop-types";
import React, { useEffect, useState } from "react";
import Select from "react-select";
import styles from "./App.css";
import "./ReactSelectElement";

function App(props) {


  return (
    <Styled styles={styles}>
       <react-select onClick={(e) => console.log(e.target)}></react-select>
    </Styled>

Answer 1

您不能像在 elements 上添加 properties 或 natives event 那样添加 custom event，但您可以添加 custom events，并倾听他们的声音：

让我们看一个例子 onChange:

web-component.js

/* dispatch a custom event called onChange*/
dispatchCustomEvent(evenName) {
  const event = function (arg) {
      this.mountPoint.dispatchEvent(
        new CustomEvent(evenName, {
          bubbles: true,
          composed: true,
          detail: arg,
        })
      );
    };
  return event.bind(this);
}

然后传递该事件：

ReactDOM.render(
  <CacheProvider value={cache}>
    <Select
      isMulti
      name="time"
      options={timeOptions}
      className="basic-multi-select"
      classNamePrefix="select"
      placeholder={<div>Time</div>}
      onChange={dispatchCustomEvent("onChange")}
    />
  </CacheProvider>,
  this.mountPoint
);

在您的 React 应用程序上收听该事件：

app.js

function App(props) {
  const ref = useRef();

  useEffect(() => {
    ref.current.addEventListener("onChange", (e) => {
      console.log(e.target);
    });
  });

  return (
    <Styled styles={styles}>
      <react-select ref={ref}></react-select>
    </Styled>
  );
}

网络组件中的反应-select | onChange 事件

react-select in web-component | onChange Event

event-handling

web-component

reactjs

react-select