javascript - 将参数与字段数据一起传递给 onChange 事件上的函数

Question

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

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

您在第三个位置传递了 e 参数，并且在您试图从第一个参数访问它的函数中。将 e 作为第一个参数传递

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