Question

使用svelte，我要根据是否选中复选框来设置输入的默认值。输入用于药物剂量计算。该计算将采用以千克（k）为单位的重量值x输入值。

当通过复选框操作更改此输入值时，或者当用户手动更改输入值时（目前还没有发生），我还需要更改药物计算结果。

我已经能够在选中复选框时实现输入值更改，但是不清楚在选中复选框或手动更改输入值时如何重新进行计算。

在将正确的输入值集成到我的计算中时，我需要一些帮助。

复选框：

let yes = false;
<input type=checkbox bind:checked={yes} >

输入：

<input value={yes? item.Fdosevalue : item.dosevalue} step={item.dosestep} 
min={yes ? item.Fdosemin : item.dosemin} max={yes ? item.Fdosemax : item.dosemax} >

计算：

不确定在此计算中如何整合复选框更改。

<span bind:this={k}> {( (k * item.dosevalue)).toFixed(1)} {item.appendvol} </span>

这里是REPL，希望可以使它更清晰

Answer 1

您可以使用数据绑定来完成此操作：

<input bind:value={...} />

您只需要一个位置来存储值：

let values = {}

然后您用唯一的密钥绑定到values。

<input bind:value={values[item.name]}/>

每次复选框更改时，请确保使用每种流体的默认值初始化values字典：

<input type=checkbox bind:value={yes} on:change={handleChange}/>

// initialize default values
function handleChange() {
   const entries = fluids.map(item => {
     const defaultValue = yes ? item.dosevalue : item.Fdosevalue
     return [item.name, defaultValue]
   })

   values = Object.fromEntries(entries)
}

Svelte-绑定复选框以切换输入值

1 个答案: