Question

我正在尝试根据任何产品数量更改产品价格和总成本，这是通过具有最小和最大数量的文本字段完成的。当数量变化时，我将获得更新的数量和价格该产品在后端并在前端适当更新。所以我试图使用匿名函数并将参数传递给另一个函数，但我得到一个错误，说e.target.value是undefined。这是我写的代码/尝试到目前为止。

import React from 'react'
import App from './App'
import Cookies from 'universal-cookie'
import './view_cart.css'
import {ToastContainer, toast,style} from 'react-toastify'

var hiding='';
class View_cart extends React.Component
{
  constructor(props)
  {
    super(props);
    this.state={item_list:{},"total_items_price":'',product_count:''}
    this.view_cart_details=this.view_cart_details.bind(this)
    this.delete_item_cart=this.delete_item_cart.bind(this)
    this.product_state=this.product_state.bind(this)
  }

  registeration_notification(value_to_render)
  {
    toast(value_to_render,
      {
        //position: toast.POSITION.BOTTOM_CENTER,
        autoClose: 3000,
      }
    );
  }

  product_state(e,product_name,manufacturer)
  {
    this.setState({"product_count":e.target.value})
    console.log(this.state.product_count)
    console.log(product_name,manufacturer)
  }

  display_cart()
  {
    //console.log(Object.keys(this.state.item_list))
    const mapping = Object.keys(this.state.item_list).map((item,id) =>
    {
      console.log(this.state.item_list[item]['image_path'])
      var location = require('./Images/'.concat(this.state.item_list[item]['image_path']))
      //console.log(location)
      return (
        <div>
          <div className="container">
            <table id="cart" className="table table-hover table-condensed">
              <thead>
                <tr>
                  <th style={{width:50}}>Product</th>
                  <th style={{width:10}}>Price</th>
                  <th style={{width:8}}>Quantity</th>
                  <th style={{width:22}} className="text-center">Subtotal</th>
                  <th style={{width:10}}></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td data-th="Product">
                    <div className="row">
                      <div className="col-sm-2 hidden-xs"><img src={location} alt="..." className="img-responsive"/></div>
                      <div className="col-sm-8">
                        <h4 className="nomargin">{this.state.item_list[item]["Name"]} {'by '.concat(this.state.item_list[item]["manufacturer"])}</h4>
                      </div>
                    </div>
                  </td>
                  <td data-th="Price">{this.state.item_list[item]["original_price"]}</td>
                  <td data-th="Quantity">
                    <input type="number" min="1" max="10" value={this.state.product_count} onChange={(e) => this.product_state(this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'],e)} placeholder="Min 1 Max 10" className="form-control text-center"/>
                  </td>
                  <td data-th="Subtotal" className="text-center">{this.state.item_list[item]['price']}</td>
                  <td className="actions" data-th="">
                    <button className="btn btn-danger btn-sm"  style ={{hiding}} onClick={() =>this.delete_item_cart(this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}><i className="fa fa-trash-o"></i></button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
          )
    })
  return mapping
}

  sample_string()
  {
    console.log("ONCLICK WORKING")
  }
  sample_cookie_output()
  {
    const test_cookie_testing = new Cookies();

    var auth_string='Token '
    console.log((auth_string.concat(test_cookie_testing.get('Authorization'))),typeof((auth_string.concat(test_cookie_testing.get('Authorization')))))
    return (auth_string.concat(test_cookie_testing.get('Authorization')))
  }

  delete_item_cart(product_name_delete,manufacturer_name)
  {
    fetch('http://127.0.0.1:8000/delete_item_cart/',
    {
      method:"POST",
      headers:
      {
      'Content-Type':"application/json",
      "Accept":"application/json",
      "Authorization":this.sample_cookie_output()
    },
      body:JSON.stringify({"product_name":product_name_delete,"manufacturer":manufacturer_name})

  })
  .then(something =>something.json())
  .then(findResponse =>
    {
      console.log(findResponse,typeof(findResponse))
      if((Object.keys(findResponse).length)===1 && (Object.keys(findResponse).includes("Data Deletion")))
      {
        hiding='displayNone';
        console.log(hiding)
        //console.log("A user with this name already exists.")
        this.registeration_notification("The Product has been removed from the cart")
      }
    }
  )
  }

  view_cart_details()
  {
    fetch('http://127.0.0.1:8000/view_cart/',
    {
      method:"GET",
      headers:
      {
        'Content-Type':"application/json",
      "Accept":"application/json",
      "Authorization":this.sample_cookie_output()
    },
  })
.then(something =>something.json())
.then(findResponse =>
  {
    console.log(findResponse)
    this.setState({"item_list":findResponse[0],"total_items_price":findResponse[1]})
  }

)
  }

componentDidMount(){
  this.view_cart_details()
}

render(){
  return (
    <div>
      <App/>
      {this.display_cart()}
      <button onClick={this.delete_item_cart}>Test Button</button>
      <ToastContainer/>
    </div>
  )
}
}

export default View_cart

Answer 1

试试这个

<button onClick={(e) => this.delete_item_cart(e)}>Test Button</button>

Answer 2

您正在第三个位置和您尝试从第一个参数访问它的函数中传递e参数。将e作为第一个参数

传递

onChange={(e) => this.product_state(e, this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}

Answer 3

更改电子参数位置

product_state(e,product_name,manufacturer)

到

product_state(product_name,manufacturer,e)

将参数传递给onChange事件上的函数以及字段数据

3 个答案: