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