首页 > 其他分享 >SolidJS-多文件间传递同一个信号量

SolidJS-多文件间传递同一个信号量

时间:2024-08-30 16:06:54浏览次数:10  
标签:filter const 同一个 value 信号量 SolidJS props event HTMLInputElement

SolidJS-多文件间传递同一个信号量

现在我在controlPanel.tsx中返回了一个控制面板(HTML代码),可以控制node、link、step1和step2的值。在matrixWave.tsx中我根据node、link、step1和step2的值进行数据的过滤,然后生成对应的matrixWave的SVG图。因此,我希望在web中对node、link、step1和step2的值进行更改后,效果能及时反映在matrixWave的界面中。

App.tsx对应代码

  • 根据定义的FilterFactor数据结构,创建对应的信号量
  • 在controlPanel中对filter的四个子值进行修改,则赋 setFilter
  • 在matrixWave中需要读取filter的值来对数据进行过滤,赋 filter
import ControlPanel  from './assets/components/ControlPanel';
import MatrixWave from './assets/components/MatrixWave';
import {FilterFactor} from "./assets/utils/type"

const App: Component = () => {
  const [filter, setFilter] = createSignal<FilterFactor>({
    node: 75,
    link: 75,
    step1: 1,
    step2: 6,
  });
  
  return (
    <div>
      <ControlPanel setFilter={setFilter} filter={filter}/>
      <MatrixWave filter={filter} />
    </div>
  );
};

export default App;

controlPanel.tsx对应代码

  • 注意controlPanel输入的参数!!!
const ControlPanel = (props: { 
  setFilter: (filter: FilterFactor) => void,
  filter: () => FilterFactor
}) => {
  let nodeFilterInput: HTMLInputElement | undefined;
  let linkFilterInput: HTMLInputElement | undefined;
  let step1FilterInput: HTMLInputElement | undefined;
  let step2FilterInput: HTMLInputElement | undefined;

  createEffect(() => {
    if (nodeFilterInput) {
      nodeFilterInput.value = "75"; // 初始值
    }
    if (linkFilterInput) {
      linkFilterInput.value = "75"; // 初始值
    }
    if (step1FilterInput) {
      step1FilterInput.value = "1"; // 初始值
    }
    if (step2FilterInput) {
      step2FilterInput.value = "6"; // 初始值
    }
  });
  const handleNodeFilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), node: parseInt(value, 10) });
  };

  const handleLinkFilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), link: parseInt(value, 10) });
  };

  const handleStep1FilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), step1: parseInt(value, 10) });
  };

  const handleStep2FilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), step2: parseInt(value, 10) });
  };

  return (
    <div id="controlPanel">
                    <input type="text" name="nodeFilter" id="nodeFilterValue" style="width:75%"
                      value="75" 
                      ref={nodeFilterInput}
                      onInput={handleNodeFilterChange}/>
                      <input type="text" name="linkFilter" id="linkFilterValue" style="width:75%" 
                      ref={linkFilterInput}
                      onInput={handleLinkFilterChange} />
                      <input type="text" name="stepFilter1" id="stepFilter1" style="width:30%"
                        ref={step1FilterInput}
                        onInput={handleStep1FilterChange} /> ...
                      <input type="text" name="stepFilter2" id="stepFilter2" style="width:30%"
                        ref={step2FilterInput}
                        onInput={handleStep2FilterChange} />
    </div>
  );
};

matrixWave.tsx代码

import { Component, createEffect, createSignal, onCleanup } from "solid-js";
import * as d3 from "d3";
import Papa from "papaparse";
import {FilterFactor} from "../utils/type";


const MatrixWave = (props: { filter: () => FilterFactor }) => {
  const [filter, setFilter] = createSignal<FilterFactor>({
    node: 75,
    link: 75,
    step1: 1,
    step2: 6,
  });

  createEffect(() => {
    // 监听filter的变化
    const filterValue = props.filter();
    filterFactor = { ...filterFactor, ...filterValue };
    console.log("Updated filterFactor:", filterFactor);
    
    if (csvDataA().length > 0 && csvDataB().length > 0 ) {
      getShowData("update");
      console.log("datasetA: ", datasetA);
      console.log("datasetb: ", datasetB);
      getNodeSet();
      getEdgeSet();
      console.log("nodeSet: ", nodeSet);
      console.log("edgeSet: ", edgeSet);
      getDataInStep_Node();
      getDataInStep_Link();
      filterNodeSet();
      filterEdgeSet();
      setStepIndexToDataInStep();
      console.log("DataInStep:",dataInStep);
      const matrix = new Matrix("matrixWave");
      setMatrixInstance(matrix);

    }
  });

  return (
    <div>
      <div id='matrixWave'>
        {/* <p>Node Filter Value: {props.nodeFilter()}</p> */}
        <p>step1 Filter Value: {filter().step1}</p> 显示node的值
      </div>
    </div>
  );
};

export default MatrixWave;

标签:filter,const,同一个,value,信号量,SolidJS,props,event,HTMLInputElement
From: https://www.cnblogs.com/Frey-Li/p/18388900

相关文章

  • MySQL的 索引名 ,不同的表 可以 同一个索引名吗
    在MySQL中,不同的表可以使用相同的索引名。MySQL的索引名是在表级别定义的,这意味着索引名的作用域限定于其所属的表。因此,即使两个或多个表拥有相同名称的索引,也不会引起冲突,因为MySQL会根据表名和索引名的组合来唯一标识索引。例如,如果你有两个表users和products,并且你想在这两个......
  • 基于STM32F103的FreeRTOS系列(十一)·信号量·二值信号量与计数信号量详细使用以及移植
    目录1. 信号量简介1.1 同步和互斥1.1.1 同步1.1.2 互斥1.1.3 总结1.2 分类1.2.1 二值信号量1.2.2 计数信号量1.2.3 互斥信号量1.2.4 递归信号量2. 信号量控制块3. 常用信号量API函数3.1 创建信号量函数3.1.1 创建二值信号量 xSe......
  • 使用SVN服务器和GIT服务器管理同一个项目
    1. 背景软件发布版本代码需要提交公司SVN,中间开发环节代码管理采用Git,同一套代码需要同时在两个服务器间进行同步。 2. 解决方案方案1:SVN与Git共存,该方案需要手动同步本地代码、SVN服务器代码、Git服务器代码;方案2:SVN作为Git的远程分支,该方案在库搭建完成后,可以使用git自......
  • FreeRTOS 快速入门(五)之信号量
    目录一、信号量的特性1、信号量跟队列的对比2、两种信号量的对比二、信号量1、二值信号量1.1二值信号量用于同步1.2二值信号量用于互斥2、计数信号量三、信号量函数1、创建2、删除3、give/take一、信号量的特性信号量(Semaphore)是一种实现任务间通信的机制,可以......
  • 信号量、PV操作及软考高级试题解析
    信号量在并发系统中,信号量是用于控制公共资源访问权限的变量。信号量用于解决临界区问题,使得多任务环境下,进程能同步运行。此概念是由荷兰计算机科学家Dijkstra在1962年左右提出的。信号量仅仅跟踪还剩多少资源可用,不会跟踪哪些资源是可用的。信号量机制,处理进程同步和互斥的问......
  • 同一个ip:port上同时开启socks5和http代理服务器
    代码如下所示:packagemainimport( "bufio" "errors" "flag" "fmt" "io" "log" "net" "net/http" "strconv" "sync")funcmain(){ addr:=flag.String(&......
  • 关于如何解决IDEA中同一个src下多个类中之一运行时自动报错其他类中的问题导致想要运
    关于如何解决IDEA中同一个src下多个类中之一运行时自动报错其他类中的问题导致想要运行的类无法正常运行的问题的解决思路WrongFirst:我准备了一个正常类BG和一个有错误的类HelloWorld,来看看会发生什么。WrongSecond:不出意外的报错了,这似乎和IDEA的默认设置有关。SolveFi......
  • 嵌入式学习---DAY27:信号量、进程间的通信
    一、信号量信号量(semaphore)是操作系统用来解决并发中的互斥和同步问题的一种方法。信号量(个数)---反映的是资源的数量信号量的分类:信号无名量==》线程间通信             有名信号量==》进程间通信1.信号量的定义(为全局变量)sem_t sem......
  • 信号量机制以及管道通信
    一、信号量(个数)反映的是资源的数量1.1、信号量定义1、信号量-----来描述可使用的资源的个数2、p操作-----表示使用这个资源资源个数减一1.2、p操作逻辑尝试获取资源有资源可用,直接使用,资源个数减一如果没有资源则等待v操作------产生这个资源资源个数加11.3、......
  • UCOSIII信号量详解
    目录​编辑前言一、信号量的类型二、信号量的使用方法2.1创建信号量2.2请求信号量:2.3释放信号量:三、信号量的作用四、注意事项五、信号量的API函数六、代码实现6.1创建信号量6.2使用信号量前言UCOSIII信号量是UCOSIII操作系统中用于任务同步和互斥访问共......