input - Svelte - 绑定输入
问题描述
我正在开发一个单位转换应用程序,将医疗单位从美国单位转换为国际 (SI) 单位。我试图为每个 US 和 SI 转换使用单独的输入,以便在更改一个输入值时,另一个输入会根据新值更改。每次转换都使用一个因子进行计算。我有一个简单的示例设置,它将在加载时填充输入值,但我无法让输入更改功能工作。
这是我的代码:
<script>
let units = [{
"name": "Acetaminophen",
"specimen": "Serum, Plasma",
"conventionalRange": "10-30",
"conventionalUnit": "µg/mL",
"factor": "6.614",
"siRange": "66-200",
"siUnit": "µmol/L",
"siValue": "66",
"usValue": "10"
}, {
"name": "Acetoacetate",
"specimen": "Serum, Plasma",
"conventionalRange": "<1",
"conventionalUnit": "mg/dL",
"factor": "97.95",
"siRange": "<100",
"siUnit": "µmol/L",
"siValue": "100",
"usValue": "1"
}, {
"name": "Acetone",
"specimen": "Serum, Plasma",
"conventionalRange": "<1.0",
"conventionalUnit": "mg/dL",
"factor": "0.172",
"siRange": "<0.17",
"siUnit": "mmol/L",
"siValue": "0.17",
"usValue": "1.0"
}, {
"name": "Acid phosphatase",
"specimen": "Serum",
"conventionalRange": "<5.5",
"conventionalUnit": "U/L",
"factor": "16.667",
"siRange": "<90",
"siUnit": "nkat/L",
"siValue": "90",
"usValue": "5.5"
}, {
"name": "Activated partial thromboplastin time (APTT)",
"specimen": "Whole blood",
"conventionalRange": "25-40",
"conventionalUnit": "s",
"factor": "1",
"siRange": "25-40",
"siUnit": "s",
"siValue": "25",
"usValue": "25"
}
]
let factor = '';
let siValue = '';
let usValue = '';
function setBothFromSI(value) {
siValue = +value;
usValue = +(siValue / factor).toFixed(2);
}
function setBothFromUS(value) {
usValue = +value;
siValue = +(usValue * factor).toFixed(2);;
}
</script>
<style>input{max-width:150px}
.bold{font-weight:600;}
</style>
{#each units as { usValue,siValue,siUnit,siRange,conventionalUnit,conventionalRange,specimen,name, factor}, i}
<p class=bold >{name}</p>
<label>
US Value
<input value={usValue} on:input="{e => setBothFromUS(e.target.value)}" min="" type=number placeholder=" US">
</label>
<label>
SI Value
<input value={siValue} on:input="{e => setBothFromSI(e.target.value)}" min="" type=number placeholder="SI">
</label>
{/each}
任何帮助,将不胜感激
解决方案
看起来唯一的问题是在setBothFromSI
and中setBothFromUS
,您正在尝试更新变量siValue
and usValue
。但是没有什么是渲染这些变量,你的输入实际上是渲染每个包含的值unit
,因为{#each units as { usValue, siValue } }
块
因此,在这些setBoth
函数中,您可能希望更新 内部的值units
,如下所示:
function setBothFromSI(value, i) {
const { factor } = units[i];
units[i].siValue = +value;
units[i].usValue = +(value / factor).toFixed(2);
}
function setBothFromUS(value, i) {
const { factor } = units[i];
units[i].usValue = +value;
units[i].siValue = +(value * factor).toFixed(2);;
}
然后确保将索引传递给这样的函数
<input value={usValue} on:input="{e => setBothFromUS(e.target.value, i)}" min="" type=number placeholder=" US">
这是一个更新的 REPL
推荐阅读
- python - 如何使用 selenium TouchActions python 点击特定元素内的坐标?
- java - Java 8 compute() 和 computeIfPresent() 检查现有值
- python - 使用 python selenium webdriver 查找 html 页面中的所有子元素
- java - 使用非对称加密(公钥加密)时出现 IllegalBlockSize 异常
- javascript - Nodejs如何响应本地人每个获取app.use的视图
- python - ImportError: DLL load failed: 动态链接库 (DLL) 初始化例程失败。(导入 tensorflow 错误)
- java - 解码 base64 字符串并重新编码返回的字节不会返回相同的字符串
- rx-java - 获取正在运行的 RxJava (1.x) Observable (blocking) 的最新元素的最简单方法
- html - 在 contentBox 上添加操作代码 - Liferay - AUI 模态
- html - 找不到在哪里更改“背景附件:固定;”