Parece que falta decirle a React que controle el componente checkbox
, esto se hace mapeando el valor de la propiedad de estado value
, en la propiedad value
del checkbox
:
function App() {
const [value, setValue] = React.useState(0);
const [price, setPrice] = React.useState(8);
const [plan, setPlan] = React.useState("10k");
const [toggle, setToggle] = React.useState(false);
const handleDiscount = () => {
setToggle((toggle) => !toggle);
};
const handlePriceChange = (e) => {
const valueChange = e.target.value;
console.log("type: ",e.target.type);
console.log("valueChange: ",valueChange)
setValue(valueChange);
//logica
};
return (
<div className="App">
<input
type="range"
name="range"
value={value}
min="0"
max="100"
id="range"
onChange={handlePriceChange}
/>
<br />
<input
type="checkbox"
name="discount"
id="discount"
value={value}
onClick={handleDiscount}
onChange={handlePriceChange}
/>
<label htmlFor="discount">discount</label>
<div> {price} </div>
<hr />
<div> {plan} Pageviews </div>
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<div id="root"></div>
Así como se encuentra el proyecto, el checkbox
no tiene asignada la propiedad value
, por lo cual le asigna un valor ON por default, y ese valor es el que se asigna a la propiedad de estado value
.
Por esta razón, la barra de range
se comporta de forma inestable, recíbe On
en vez de un rango numerico.
Espero que esta respuesta sea de ayuda.