qwik 中的双向道具

Question

是否可以为 qwik 中的组件创建双向属性？

我想创建一个自定义输入组件，用于显示金额和单位的大小。 为了避免不必要的事件，我只想双向绑定值以像这样使用它：

Size: <SizeInput value={model.size} />

因此我会创建一个像这样的组件：

import { component$ } from '@builder.io/qwik';
export const SizeInput = component$((props: { value: number }) => {
  props.value = 123; //Simulate manipulating the value in on-blur of one of both sub elements.
  return (
    <>
      <input type="number" value={props.value}/>
      <select>
        <option>Unit 1</option>
        <option>Unit 2</option>
      </select>
    </>
  );
});

当我执行此代码时，调试器告诉我......

道具是不可变的

这样做的正确方法是什么？ 我真的需要提供完整的商店或 QRL 的功能吗？

Answer 1

import { component$, useSignal, $, type PropFunction } from '@builder.io/qwik';

interface SizeInputProps {
  value: number;
  onInput$: PropFunction<(e: Event) => number>
}
export const SizeInput = component$((props: SizeInputProps) => {
  const { onInput$, value } = props
  return (
    <>
      <input onInput$={onInput$} type="number" value={value} />
      <select>
        <option>Unit 1</option>
        <option>Unit 2</option>
      </select>
    </>
  );
});


export default component$(() => {
  const input = useSignal(123)
  const handleChange$ = $((e: Event) => input.value = ((e.target as HTMLInputElement).valueAsNumber))
  return <div>
    <div>{input.value}</div>
    <SizeInput value={input.value} onInput$={handleChange$} />
  </div>
});

Answer 2

Qwik

bind:

属性语法糖正是用于此目的：

import { component$, useSignal } from '@builder.io/qwik';

export interface IndexProps {
  count: number;
}

export default component$(() => {
    const count = useSignal('1');

    return (
      <div>
          <h1>Current number is: {count}</h1>
          <input type="number" bind:value={count}   />
      </div>
    );
});

对于复选框，您也有

bind:checked