反応、Vue、およびsvelte:マルチチェックボックス結合の比較
14125 ワード
マルチチェックボックスのバインド.
マルチチェックボックスのバインディングを扱うのは、反応しない最高の仕事です.反応は、VueまたはSvelteより非常に多くのコードを必要とします.私はVue例とのこの比較に基づいて、私は同じ“基礎”を維持しようとしました.どのように単純なVueやSvelteで参照してください?
チェックイットアウト🚀
反応する
Live Example
const [checkedJobs, setCheckedJobs] = useState<string[]>(['Frontend']);
const handleMultiCheckbox = ({
target: { value },
}: React.ChangeEvent<HTMLInputElement>) => {
let checked = [...checkedJobs];
let findIndex = checked.findIndex(
(item: string): boolean => item === value
);
if (!checkedJobs.includes(value)) {
checked = [...checkedJobs, value];
} else {
checked = checkedJobs.filter(
(item: string, index: number) => index !== findIndex
);
}
setCheckedJobs(checked);
};
<section>
<h2>Multi Checkbox</h2>
<input
type="checkbox"
id="frontend"
value="Frontend"
onChange={handleMultiCheckbox}
/>
<label htmlFor="frontend">Frontend Developer</label>
<input
type="checkbox"
id="backend"
value="Backend"
onChange={handleMultiCheckbox}
/>
<label htmlFor="backend">Backend Developer</label>
<input
type="checkbox"
id="fullstack"
value="Fullstack"
onChange={handleMultiCheckbox}
/>
<label htmlFor="fullstack">Fullstack Developer</label>
<p>Checked jobs: {checkedJobs.map((item: string) => item).join(', ')}</p>
</section>
Vue
Live Example
const checkedJobs = ref(['Frontend']);
<section>
<h2>Multi Checkbox</h2>
<input
type="checkbox"
id="frontend"
value="Frontend"
v-model="checkedJobs"
/>
<label for="frontend">Frontend Developer</label>
<input
type="checkbox"
id="backend"
value="Backend"
v-model="checkedJobs"
/>
<label for="backend">Backend Developer</label>
<input
type="checkbox"
id="fullstack"
value="Fullstack"
v-model="checkedJobs"
/>
<label for="fullstack">Fullstack Developer</label>
<p>Checked jobs: {{ checkedJobs }}</p>
</section>
スベルト
Live Example
let checkedJobs: string[] = ['Frontend Developer'];
<section>
<h2>Multi Checkbox</h2>
<input
type="checkbox"
id="frontend"
value="Frontend"
bind:group={checkedJobs}
/>
<label for="frontend">Frontend Developer</label>
<input
type="checkbox"
id="backend"
value="Backend"
bind:group={checkedJobs}
/>
<label for="backend">Backend Developer</label>
<input
type="checkbox"
id="fullstack"
value="Fullstack"
bind:group={checkedJobs}
/>
<label for="fullstack">Fullstack Developer</label>
<p>Checked jobs: {checkedJobs}</p>
</section>
Reference
この問題について(反応、Vue、およびsvelte:マルチチェックボックス結合の比較), 我々は、より多くの情報をここで見つけました https://dev.to/ccreusat/react-vue-and-svelte-comparing-multi-checkbox-binding-1g6fテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol