我想根据勾选的复选框更改价格。如何从 onSubmit() 中删除 if 语句

Question

我希望用户 select 项目形成复选框并根据 selected 项目提交数字价格。我在这里使用 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;

Answer 1

如果您只是想减少冗余（并假设模式成立*），那么可以减少状态值数组。

Array::map return是一个new等长数组，是一对一的关系。与 array::map 一起使用的回调也应该是一个 纯函数 ，这意味着它有零副作用。将此与 array::reduce 进行对比，后者使用纯函数回调和 return 单个值，即 price 或 array::forEach 可以在回调中有副作用，即它可以更新外部 price，但它是一个 void return.

* 求和模式：

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)));

我想根据勾选的复选框更改价格。如何从 onSubmit() 中删除 if 语句

I want to change price depending on checkboxes ticked. How to remove if statement from onSubmit()

javascript

node.js

web

reactjs

mern