Обрабатывая изменения в группе контролируемых входов в ReactJS, они всегда должны быть равны 100% и не должны быть отрицательными - PullRequest
Новая
       5

Обрабатывая изменения в группе контролируемых входов в ReactJS, они всегда должны быть равны 100% и не должны быть отрицательными

0 голосов
/ 08 апреля 2020

Как видно из названия, у меня проблемы с обработкой группы входных данных в ReactJS. Проблема в том, что у меня есть массив значений, которые я бы хотел, чтобы пользователь мог менять по одному, а затем настраивал другие контролируемые входные значения. Каждый массив представляет собой коэффициент, и все они должны быть добавлены к итоговому значению 1. Поэтому измените одно значение, а затем рассчитайте изменение, которое необходимо применить к другой крысе ios, которая выше нуля.

Я сталкиваюсь с проблемами при попытке сохранить вычисленные значения между 0,0 и 1,0. слишком резкое изменение одного устанавливает другие на go ниже нуля. Кто-нибудь знает лучший способ вычислить этот массив и держать все в пределах диапазона?

Это то, что у меня сейчас, и он не работает должным образом, я попробовал несколько подходов. 

handlePercentChange = (event, i) => {
    const proteins = [...this.state.proteins];
    if (event > 1) {
      event = 1;
    }

    if (event < 0) {
      event = 0;
    }
    proteins[i].percentOfBlend = event;

    let hasPercent = proteins.filter((protein) => protein.percentOfBlend > 0)
      .length;

    let total = null;
    proteins.forEach((protein) => {
      total = protein.percentOfBlend + total;
    });
    let change = total - 1;


    const changeDivide = change / (hasPercent - 1);


    proteins.forEach((protein, index) => {
      if (index !== i && protein.percentOfBlend > 0) {
        protein.percentOfBlend = protein.percentOfBlend - changeDivide;
        console.log("Protein to set", protein);
        if (protein.percentOfBlend < 0) {
          let negNum = protein.percentOfBlend;
          protein.percentOfBlend = protein.percentOfBlend - negNum;
          let hasPercent =
            proteins.filter((protein) => protein.percentOfBlend > 0).length - 1;
          let change = -1 * (negNum / hasPercent);
          proteins.forEach((protein, index) => {
            if (index !== i && protein.percentOfBlend > 0) {
              protein.percentOfBlend = protein.percentOfBlend + change;
            }
          });
        }
      }
    });

функция handlePercentChange() запускается onChange на входе

Любая помощь будет признательна, так как эта проблема поставила меня в тупик.

...