Question

在我的渲染功能中，我动态地贬低了一组产品，其中包括图像，价格，数量增加/减少以及用户已经购买的数量等详细信息。现在我想在onCLick上添加一个功能参数，以便我可以删除此产品并将其从呈现的HTML页面中隐藏。这是我到目前为止所尝试的。

当页面被渲染时，会自动调用onClick函数，这是我不想要的。

以下是相同的代码。

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

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

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

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

  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 class="container">
            <table id="cart" class="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}} class="text-center">Subtotal</th>
                  <th style={{width:10}}></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td data-th="Product">
                    <div class="row">
                      <div class="col-sm-2 hidden-xs"><img src={location} alt="..." class="img-responsive"/></div>
                      <div class="col-sm-8">
                        <h4 class="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" class="form-control text-center" value="1"/>
                  </td>
                  <td data-th="Subtotal" class="text-center">{this.state.item_list[item]['price']}</td>
                  <td class="actions" data-th="">
                    <button class="btn btn-danger btn-sm" onClick={this.delete_item_cart(this.state.item_list[item]["Name"],this.state.item_list[item]["manufacturer"])}><i class="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")))
      {
        //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

更改

onClick={this.delete_item_cart(this.state.item_list[item]["Name"],this.state.item_list[item]["manufacturer"])}

到

onClick={() => this.delete_item_cart(this.state.item_list[item]["Name"],this.state.item_list[item]["manufacturer"])}

文档https://reactjs.org/docs/handling-events.html

Answer 2

这里的问题是你在渲染时调用this.delete_item_cart。

所以当你写

onClick={
  this.delete_item_cart(
    this.state.item_list[item]["Name"],
    this.state.item_list[item]["manufacturer"]
  )
}

花括号表示表达式，这里是一个函数调用，返回值将用作onClick prop值。

你想要的不是返回值，而是作为道具传递的实际功能，这里有哪些选项？

例如，如果你写了

onClick={this.delete_item_cart}

它会“起作用”，因为你传递一个函数作为表达式，而不是它的返回值。

这里一个明显的解决方案是将函数包装在另一个函数中，如下所示：

onClick={() =>
  this.delete_item_cart(
    this.state.item_list[item]["Name"],
    this.state.item_list[item]["manufacturer"]
  )
}

我们在这做了什么？

我们创建了一个匿名函数，它返回我们想要用其参数调用的函数。因此，单击时，将使用指定的参数调用this.delete_item_cart函数。

这个箭头符号有时很难理解，所以这就是使用ES5函数的样子：

onClick={function () {
  return this.delete_item_cart(
    this.state.item_list[item]["Name"],
    this.state.item_list[item]["manufacturer"]
  )
}}

我希望这可以帮助您理解和解决这个问题。

在ReactJS中在渲染时调用的onClick函数

2 个答案:

我们在这做了什么？