Как сделать что-бы сумма 4 ползунков не была больше 100?

Question

Как сделать что-бы когда сумма всех ползунков равна 100, то они могут только уменьшатся. То есть весь товар это 100% , последний ползунок выставляется автоматически. [![

import React, { useState, useEffect } from 'react'
import './CrackerConstructor.scss'
import soybean from '../../assets/svg/soybean.svg'
import sesame from '../../assets/svg/sesame.svg'
import wheat from '../../assets/svg/wheat.svg'
import corn from '../../assets/svg/corn.svg'

export default function CrackerConstructor() {
  const [ soybeanCount, setSoybeanCount ] = useState(0);
  const [ sesameCount, setSesameCount ] = useState(0);
  const [ wheatCount, setWheatCount ] = useState(0);
  const [ cornCount, setCornCount ] = useState(0);
  let sum = Number(soybeanCount) + Number(sesameCount) + Number(wheatCount) + Number(cornCount);

  useEffect(() => {
    setCornCount(100 - (Number(soybeanCount) + Number(sesameCount) + Number(wheatCount)))
  }, [soybeanCount,sesameCount,wheatCount])


  return (
    <div className='crackerConstructor'>
      <h2 className='crackerConstructor__title'>Cracker Constructor</h2>
      <p>Current value: <span>0</span>{'\u20AC'}</p>

      <div className='crackerConstructor__app constructor'>
        <div className='constructor__soybean constructor__item'>
          <img src={soybean}/>
          <input className='constructor__slider' type="range" min="0" max="100" step="1" value={soybeanCount}  onChange={cornCount > 0 ? e => setSoybeanCount(e.target.value) : null } id="myRange"></input>
          <span className='constructor__percent'>{soybeanCount}%</span>
        </div>
        <div className='constructor__sesame constructor__item'>
          <img src={sesame}/>
          <input className='constructor__slider' type="range" min="0" max="100" step="1" value={sesameCount}  onChange={cornCount > 0 ? e => setSesameCount(e.target.value) : null} id="myRange"></input>
          <span className='constructor__percent'>{sesameCount}%</span>
        </div>
        <div className='constructor__wheat constructor__item'>
          <img src={wheat}/>
          <input className='constructor__slider' type="range" min="0" max="100" step="1" value={wheatCount}  onChange={cornCount > 0 ? e => setWheatCount(e.target.value) : null} id="myRange"></input>
          <span className='constructor__percent'>{wheatCount}%</span>
        </div>
        <div className='constructor__corn constructor__item'>
          <img src={corn}/>
          <input className='constructor__slider' type="range" min="0" max="100" step="1" value={cornCount} id="myRange"></input>
          <span className='constructor__percent'>{cornCount}%</span>
        </div>
      </div>
    </div>
  )
}

Answer 1

Я бы написал что-то вроде такого:

import React, { useState } from "react";

const CrackerConstructor = () => {
  const [state, setState] = useState({
    soybeanCount: 0,
    sesameCount: 0,
    wheatCount: 0,
  });

  const inputHandler = ({ target: { name, value } }) => {
    const newState = { ...state, [name]: Number(value) };
    if (Object.values(newState).reduce((a, b) => a + b) > 100) {
      return;
    }
    setState(newState);
  };

  const { soybeanCount, sesameCount, wheatCount } = state;
  const totalCount = soybeanCount + sesameCount + wheatCount;

  return (
    <div>
      <h2>Cracker Constructor</h2>
      <div>
        <div>
          <input
            type="range"
            name="soybeanCount"
            min={0}
            max={100}
            step={1}
            value={soybeanCount}
            onChange={inputHandler}
          ></input>
          <span>{soybeanCount}%</span>
        </div>
        <div>
          <input
            type="range"
            name="sesameCount"
            min={0}
            max={100}
            step={1}
            value={sesameCount}
            onChange={inputHandler}
          ></input>
          <span>{sesameCount}%</span>
        </div>
        <div>
          <input
            type="range"
            name="wheatCount"
            min={0}
            max={100}
            step={1}
            value={wheatCount}
            onChange={inputHandler}
          ></input>
          <span>{wheatCount}%</span>
        </div>
        <div>
          <input
            type="range"
            readOnly={true}
            min="0"
            max="100"
            step="1"
            value={totalCount}
          ></input>
          <span>{totalCount}%</span>
        </div>
      </div>
    </div>
  );
};

export default CrackerConstructor;

БЛОГ НА HUSL

Как сделать что-бы сумма 4 ползунков не была больше 100?

Ответы (1 шт):