如何在React中捕获onChange事件时更新输入值？

huangapple
go评论82阅读模式
英文:

How to update the input value when catching an onChange event in React?

问题

I am having problems with the total number of items in the CartHeader component. Obviously I have added the quantity of each product but the result is not as I expected ?. Can someone find the fault for me? I sincerely thank.

  1. import CartHeader from "./CartHeader";
  2. import CartBody from "./CartBody";
  3. import CartFooter from "./CartFooter";
  4. import "./styles.css";
  6. class App extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {
  10.       products: [
  11.         {
  12.           id: 1,
  13.           name: "Apple Watch Series 5",
  14.           description: "Description for Apple Watch Series 5",
  15.           img:
  16.             "https://bachlongmobile.com/media/catalog/product/cache/2/image/040ec09b1e35df139433887a97daa66f/2/0/2076130625_1_1_1.jpg",
  17.           price: 499.99,
  18.           quantity: 1
  19.         },
  20.         {
  21.           id: 2,
  22.           name: "iPhone 11 Pro Max",
  23.           description: "Description for iPhone 11 Pro Max",
  24.           img:
  25.             "https://cdn.fptshop.com.vn/Uploads/Originals/2019/9/11/637037687763926758_11-pro-max-xanh.png",
  26.           price: 1099.99,
  27.           quantity: 1
  28.         },
  29.         {
  30.           id: 3,
  31.           name: "Macbook Pro 16 inch",
  32.           description: "Description for Macbook Pro 16 inch",
  33.           img: "https://shopdunk.com/wp-content/uploads/2019/11/mac16inch.jpg",
  34.           price: 2399.99,
  35.           quantity: 1
  36.         },
  37.         {
  38.           id: 4,
  39.           name: "iPad Pro 12.9 inch",
  40.           description: "Description for iPad Pro",
  41.           img:
  42.             "https://cdn.fptshop.com.vn/Uploads/Originals/2019/1/11/636828015979564724_ipad-pro-12-9-xam-1.png",
  43.           price: 999.99,
  44.           quantity: 1
  45.         },
  46.         {
  47.           id: 5,
  48.           name: "AirPods Pro",
  49.           description: "Description for AirPods Pro",
  50.           img:
  51.             "https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MWP22?wid=1144&hei=1144&fmt=jpeg&qlt=80&op_usm=0.5,0.5&.v=1572990352299",
  52.           price: 249.99,
  53.           quantity: 1
  54.         }
  55.       ]
  56.     };
  57.   }
  59.   onRemoveProduct = id => {
  60.     const newProducts = this.state.products;
  61.     // Find the index of the product to be removed
  62.     let index = newProducts.findIndex(product => product.id === id);
  63.     // Check if found, then remove it
  64.     if (index !== -1) {
  65.       newProducts.splice(index, 1);
  66.       this.setState({
  67.         products: newProducts
  68.       });
  69.     }
  70.   };
  72.   handleChange = (e, id) => {
  73.     const { products } = this.state;
  74.     const indexProduct = products.findIndex(product => product.id === id);
  75.     products[indexProduct].quantity = e.target.value;
  76.     this.setState({ products });
  77.   };
  79.   render() {
  80.     const products = this.state.products;
  81.     let numberItems = 0;
  82.     let subTotal = 0;
  83.     products.map(product => {
  84.       numberItems += product.quantity;
  85.       subTotal += product.price * product.quantity;
  86.     });
  88.     return (
  89.       <main>
  90.         <CartHeader numberItems={numberItems} />
  91.         <CartBody
  92.           products={products}
  93.           onRemoveProduct={this.onRemoveProduct}
  94.           handleChange={this.handleChange}
  95.         />
  96.         <CartFooter subTotal={subTotal} />
  97.       </main>
  98.     );
  99.   }
  100. }
  102. export default App;
  104. const rootElement = document.getElementById("root");
  105. ReactDOM.render(<App />, rootElement);
英文:

I am having problems with the total number of items in the CartHeader component. Obviously I have added the quantity of each product but the result is not as I expected ?. Can someone find the fault for me? I sincerely thank.

  1. import CartHeader from &quot;./CartHeader&quot;;
  2. import CartBody from &quot;./CartBody&quot;;
  3. import CartFooter from &quot;./CartFooter&quot;;
  4. import &quot;./styles.css&quot;;
  6. class App extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {
  10.       products: [
  11.         {
  12.           id: 1,
  13.           name: &quot;Apple Watch Series 5&quot;,
  14.           description: &quot;Description for Apple Watch Series 5&quot;,
  15.           img:
  16.             &quot;https://bachlongmobile.com/media/catalog/product/cache/2/image/040ec09b1e35df139433887a97daa66f/2/0/2076130625_1_1_1.jpg&quot;,
  17.           price: 499.99,
  18.           quantity: 1
  19.         },
  20.         {
  21.           id: 2,
  22.           name: &quot;iPhone 11 Pro Max&quot;,
  23.           description: &quot;Description for iPhone 11 Pro Max&quot;,
  24.           img:
  25.             &quot;https://cdn.fptshop.com.vn/Uploads/Originals/2019/9/11/637037687763926758_11-pro-max-xanh.png&quot;,
  26.           price: 1099.99,
  27.           quantity: 1
  28.         },
  29.         {
  30.           id: 3,
  31.           name: &quot;Macbook Pro 16 inch&quot;,
  32.           description: &quot;Description for Macbook Pro 16 inch&quot;,
  33.           img: &quot;https://shopdunk.com/wp-content/uploads/2019/11/mac16inch.jpg&quot;,
  34.           price: 2399.99,
  35.           quantity: 1
  36.         },
  37.         {
  38.           id: 4,
  39.           name: &quot;iPad Pro 12.9 inch&quot;,
  40.           description: &quot;Description for iPad Pro&quot;,
  41.           img:
  42.             &quot;https://cdn.fptshop.com.vn/Uploads/Originals/2019/1/11/636828015979564724_ipad-pro-12-9-xam-1.png&quot;,
  43.           price: 999.99,
  44.           quantity: 1
  45.         },
  46.         {
  47.           id: 5,
  48.           name: &quot;AirPods Pro&quot;,
  49.           description: &quot;Description for AirPods Pro&quot;,
  50.           img:
  51.             &quot;https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/MWP22?wid=1144&amp;hei=1144&amp;fmt=jpeg&amp;qlt=80&amp;op_usm=0.5,0.5&amp;.v=1572990352299&quot;,
  52.           price: 249.99,
  53.           quantity: 1
  54.         }
  55.       ]
  56.     };
  57.   }
  59.   onRemoveProduct = id =&gt; {
  60.     const newProducts = this.state.products;
  61.     // T&#236;m vị tr&#237; sản phẩm cần xo&#225;
  62.     let index = newProducts.findIndex(product =&gt; product.id === id);
  63.     // Kiểm tra nếu t&#236;m thấy th&#236; mới xo&#225;
  64.     if (index !== -1) {
  65.       newProducts.splice(index, 1);
  66.       this.setState({
  67.         products: newProducts
  68.       });
  69.     }
  70.   };
  72.   handleChange = (e, id) =&gt; {
  73.     const { products } = this.state;
  74.     const indexProduct = products.findIndex(product =&gt; product.id === id);
  75.     products[indexProduct].quantity = e.target.value;
  76.     this.setState({ products });
  77.   };
  79.   render() {
  80.     const products = this.state.products;
  81.     let numberItems = 0;
  82.     let subTotal = 0;
  83.     products.map(product =&gt; {
  84.       numberItems += product.quantity;
  85.       subTotal += product.price * product.quantity;
  86.     });
  88.     return (
  89.       &lt;main&gt;
  90.         &lt;CartHeader numberItems={numberItems} /&gt;
  91.         &lt;CartBody
  92.           products={products}
  93.           onRemoveProduct={this.onRemoveProduct}
  94.           handleChange={this.handleChange}
  95.         /&gt;
  96.         &lt;CartFooter subTotal={subTotal} /&gt;
  97.       &lt;/main&gt;
  98.     );
  99.   }
  100. }
  102. export default App;
  104. const rootElement = document.getElementById(&quot;root&quot;);
  105. ReactDOM.render(&lt;App /&gt;, rootElement);

have I ever misunderstood the problem. Link codesandbox: https://codesandbox.io/s/thirsty-hill-6w2ex

答案1

得分: 0

The problem is that you are using the + with strings. So when you calculate the total number, you get strange results:

  1. const result = '1' + '1' + '2'
  2. console.log(result) // '112'

Change the render method to:

  1. products.map(product => {
  2.   numberItems += Number(product.quantity);
  3.   console.log(numberItems);
  4.   subTotal += Number(product.price) * Number(product.quantity);
  5. });
英文:

The problem is that you are using the + with strings. So when you calculate the total number, you get strange results:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const result = &#39;1&#39; + &#39;1&#39; + &#39;2&#39;
  2. console.log(result) // &#39;112&#39;

<!-- end snippet -->

Change the render method to:

  1. products.map(product =&gt; {
  2.   numberItems += Number(product.quantity);
  3.   console.log(numberItems);
  4.   subTotal += Number(product.price) * Number(product.quantity);
  5. });

答案2

得分: 0

  1. handleChange = (e, id) => {
  2.   const { products } = this.state;
  3.   const indexProduct = products.findIndex(product => product.id === id);
  4.   products[indexProduct].quantity = Number(e.target.value);
  5.   this.setState({ products });
  6. };

https://codesandbox.io/s/loving-hertz-vfpjw

英文: 
  1.   handleChange = (e, id) =&gt; {
  2.     const { products } = this.state;
  3.     const indexProduct = products.findIndex(product =&gt; product.id === id);
  4.     products[indexProduct].quantity = Number(e.target.value);
  5.     this.setState({ products });
  6.   };

https://codesandbox.io/s/loving-hertz-vfpjw

答案3

得分: 0

需要在map循环内返回值。

英文:

you need to return value inside map loop

  1.     products.map(product =&gt; {
  2.       numberItems += product.quantity;
  3.       subTotal += product.price * product.quantity;
  4.       return { numberItems, subTotal  }
  5.     });

huangapple
  • 本文由 发表于 2020年1月6日 23:36:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/59614857.html
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定