在原生 JS 组件之间传递数据

Question

Let's say we have an app that have of 2 components - an input that takes numbers and a range slider. When value in the input component is updated, the slider is set to that value too, and vice versa. What is the best approach to do this app in vanillaJs without using React? If I create 2 classes, how do I reactively update the state in them and how do I store these shared state?

Answer 1

There is really no need for classes or shared state. You can just use a simple event handler on each element:

 var shared = document.querySelectorAll(".shared"); shared.forEach(function(el) { el.addEventListener("input", function(e) { shared.forEach(function(el) { el.value = e.target.value; }); }); });

 <input type="text" class="shared" value="50"> <input type="range" class="shared" value="50">

Answer 2

Maybe something like this?

 const $number = document.querySelector('.number'), $slider = document.querySelector('.slider'); $number.addEventListener('change', () => { $slider.value = $number.value; }) $slider.addEventListener('input', () => { $number.value = $slider.value; });

 <input type="number" class="number" value="1" /> <input type="range" class="slider" max="100" min="1" step="1" value="1" />

Using 'input' for the range, it will update the.number while moving the bar.