如何在点击按钮时从组件向工人发送数据？

Question

请你告诉我如何在点击按钮时从组件向工人发送数据？

我试过了，没有用

// xx.postMessage([first.value,second.value]);

能否请你建议我在哪里做错了.我想做一些背景计算和返回结果的组件。

这是我的代码

import React, { useEffect } from "react";
import "./styles.css";
import worker from "./workerfile";
import WebWorker from "./setup";
export default function App() {
  const buttonHan = () => {
    alert("==g=");
    // xx.postMessage([first.value,second.value]);
    //console.log("Message posted to worker");
  };

  useEffect(() => {
    let xx = new WebWorker(worker);
    //xx.addEventListener("message", event => {
    // });
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox1</h1>
      <button onClick={buttonHan}>BTN</button>

      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

编码

https:/codesandbox.iosbold-forest-s3guc?file=srcApp.js:212-263。

Answer 1

这就是我的做法，不知道是否是最正确的方式，但我没有任何问题，像这样声明变量.另外，当涉及到与第三方事件处理程序工作时，它是非常有用的。

export default function App() {
    let xx = new WebWorker(worker);  // Declare worker
    // Constants declarations

    const buttonHan = () => {
       alert("==g=");
       xx.postMessage("[first.value,second.value]");
       console.log("Message posted to worker");
    };

    useEffect(() => {
       xx.addEventListener("message", event => {
           console.log(event)
       });
    }, [xx]);  // useEffect executes when worker is setted
    // this should be done even if variable is not a state

    ...