1

estoy intentando pasar un viejo componente que solía tener escrito en vanillaJS a react para agregar a un nuevo proyecto, el mismo en si es muy sencillo.

Consiente dos input uno de tipo range y otro de tipo checkbox y dos h1 que van cambiando dependiendo de los eventos que suceden en los input. Por ejemplo cuando muevo el input de tipo range, este dispara una función que cambia el valor de los dos h1, a su tiempo se fija si el input de tipo checkbox esta checked, en caso que sea true se le resta un 25% al valor del h1 en caso contrario sigue todo igual.

El problema esta en que una vez que hago click sobre el checkbox este si realiza el descuento sobre el valor del price pero el valor de price vuelve a su estado inicial y la barra del range vuelve al 50.

me surgen varias maneras de solucionar esto, podría ser usando un el useEffect ?

Aqui pueden ver en funcionamiento el codigo : Sandbox

Este seria el código del componente:

export default function App() {
  const [value, setValue] = useState(0);
  const [price, setPrice] = useState(8);
  const [plan, setPlan] = useState("10k");
  const [toggle, setToggle] = useState(false);

  const handleDiscount = () => {
    setToggle((toggle) => !toggle);
  };

  const handlePriceChange = (e) => {
    const valueChange = e.target.value;
    setValue(valueChange);
    let pricing = 8;
    if ((value > 0) & (value <= 20)) {
      setPlan("10k");
      pricing = 8;
    } else if (value > 20 && value <= 40) {
      setPlan("50k");
      pricing = 12;
    } else if (value > 40 && value <= 60) {
      setPlan("100k");
      pricing = 16;
    } else if (value > 60 && value <= 80) {
      setPlan("500k");
      pricing = 24;
    } else if (value > 80 && value <= 100) {
      setPlan("1M");
      pricing = 36;
    }

    if (toggle === true) {
      setPrice(pricing - pricing * 0.25);
    } else {
      setPrice(pricing);
    }
  };

  return (
    <div className="App">
      <input
        type="range"
        name="range"
        value={value}
        min="0"
        max="100"
        className="slider"
        id="range"
        onChange={handlePriceChange}
      />
      <input
        type="checkbox"
        name="discount"
        className="discount"
        id="discount"
        onClick={handleDiscount}
        onChange={handlePriceChange}
      />
      <> {price} </>
      <hr />
      <> {plan} Pageviews </>
    </div>
  );
}

Y este es el código original en vanillaJS:

const range = document.getElementById('range');
const pageviewsCount = document.getElementById('pageviews-count');
const toggleDiscount = document.getElementById('toggle_discount');
const price = document.getElementById('price');

function handlePricingChanges(value) {
    let pricing = 8;

    if ((value > 0) & (value <= 20)) {
        pageviewsCount.textContent = '10K Pageviews';
        pricing = 8;
    } else if (value > 20 && value <= 40) {
        pageviewsCount.textContent = '50K Pageviews';
        pricing = 12;
    } else if (value > 40 && value <= 60) {
        pageviewsCount.textContent = '100K Pageviews';
        pricing = 16;
    } else if (value > 60 && value <= 80) {
        pageviewsCount.textContent = '500K Pageviews';
        pricing = 24;
    } else if (value > 80 && value <= 100) {
        pageviewsCount.textContent = '1M Pageviews';
        pricing = 36;
    }

    if (toggleDiscount.checked) {
        const totalValue = pricing - pricing * 0.25;
        price.textContent = `$${totalValue}.00`;
    } else {
        price.textContent = `$${pricing}.00`;
    }


}

range.addEventListener('input', function (event) {
    console.log('range value :>> ', event.target.value);
    const value = range.value;
    handlePricingChanges(value);
});

toggleDiscount.addEventListener('input', function (event) {
    console.log('range value :>> ', event.target.value);
    const value = range.value;
    handlePricingChanges(val

1 respuesta 1

1

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, dentro de la función handlePriceChange, cuando se llama desde el checkbox.

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.