Я хочу изменить цену в зависимости от отмеченных флажков. Как удалить оператор if из onSubmit () - PullRequest
Новая
       10

Я хочу изменить цену в зависимости от отмеченных флажков. Как удалить оператор if из onSubmit ()

1 голос
/ 29 мая 2020

Я хочу, чтобы пользователи устанавливали флажок в форме товаров и отправляли числовую цену в соответствии с выбранными товарами. Я пробовал это здесь, используя оператор if. Как это сделать эффективно ?? Я пытался сопоставить состояния с помощью this.state.map (), но он тоже не работал. 

  constructor(props) {
    super();
    this.state = {
      check1: false,
      check2: false,
      check3: false,
      check4: false,
    };
    this.onCheckChange = this.onCheckChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onCheckChange(e) {
    this.setState({
      [e.target.name]: e.target.checked,
    });
  }

//**************i want to change this ****************

  onSubmit(e) {
    e.preventDefault();
    var price = 0;
    if (this.state.check1 === true) {
      price = price + 10;
    }
    if (this.state.check2 === true) {
      price = price + 20;
    }
    if (this.state.check3 === true) {
      price = price + 30;
    }
    if (this.state.check4 === true) {
      price = price + 40;
    }
    console.log(price);
  }

  render() {
    return (
      <div>
        <Form onSubmit={onSubmit}>
          checkboxes are placed
        </form>
      </div>
    );
  }
}

export default SellComponent;

1 Ответ

0 голосов
/ 29 мая 2020

Если вы просто хотите уменьшить избыточность ( и предполагаете, что шаблон содержит *), тогда сокращение по массиву значений состояния может работать.

Array :: map возвращает новый массив равной длины, это отношение 1-1. Обратный вызов, используемый с array :: map , также должен быть чистой функцией , что означает, что он имеет ноль побочные эффекты. Сравните это с array :: reduce, который использует чистый обратный вызов функции и возвращает одно значение, например price, или array :: forEach, который может иметь побочные эффекты в обратном вызове, т.е. он может обновлять внешний price, но возврат недействителен.

* Шаблон суммирования: 

price = SUM[v, i=0_n] v_i ? (i + 1) * 10) : 0

Расчет цены с использованием array :: reduce 

const computePrice = values =>
  values.reduce((price, value, index) => price + (value ? (index + 1) * 10 : 0), 0);

Использование: 

onSubmit(e) {
  e.preventDefault();
  const price = computePrice(Object.values(this.state));
  console.log(price);
}


const computePrice = values =>
  values.reduce((price, value, i) => price + (value ? (i + 1) * 10 : 0), 0);

const generalizedData = [
  [false], // 0
  [true], // 10
  [false, true], // 20
  [false, true, true], // 50
  [true, false, true, false], // 40
  [true, true, true, true, true], // 150
  [true, true, false, true, true, false, true, false], // 190
];

generalizedData.forEach(state => console.log('price', computePrice(state)));

Расчет цены с использованием array :: forEach 

const computePrice = values => {
  let price = 0;
  values.forEach((value, i) => {
    price += value ? (i + 1) * 10 : 0;
  });
  return price;
};

Использование: То же, что и раньше 

const computePrice = values => {
  let price = 0;
  values.forEach((value, i) => {
    price += value ? (i + 1) * 10 : 0;
  });
  return price;
};

const generalizedData = [
  [false], // 0
  [true], // 10
  [false, true], // 20
  [false, true, true], // 50
  [true, false, true, false], // 40
  [true, true, true, true, true], // 150
  [true, true, false, true, true, false, true, false], // 190
];

generalizedData.forEach(state => console.log('price', computePrice(state)));
...