如何将 Props 数据从渲染传递到 redux 中的 handleSubmit 函数

Question

我使用 {this.props.products.map(product => { <h1> {product.productName} </h1> } )}; 获取产品数据并在 html 中呈现 现在我想要这个 productName 和 handleSubmit 函数中的其他详细信息。

但是当我点击 <button type="submit" class="pro-btn"><i class="icon-basket"></i></button> 时，我在控制台中得到了 pid、pname 和所有值 Undefined。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getProducts } from '../actions/productsAction';
import { addToCart } from '../actions/cartAction';

class Shop extends Component {

  constructor(props) {
    super(props);

    this.state = {
      pid: '',
      pname: '',
      pprice: '',
      pimg: '',
      qty: '',
      total_price: ''
    };
  }   

  componentDidMount() {
    this.props.getProducts();
    
    let getValue = localStorage.getItem("userData");     
    this.setState({ 
      getValue: JSON.parse(getValue), 
    });   
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    const pid = this.props.products.pid;
    const pname = this.props.products.pname;
    const pprice = this.props.products.pprice;
    const pimg = this.props.products.pimg;
    const qty = "1";
    const total_price = this.props.products.total_price;
    const email = this.state.getValue.email;
    const CartData = {pid: pid, pname: pname, pprice: pprice, pimg: pimg, qty:qty, total_price:total_price, email:email}
    this.props.addToCart(CartData);
    console.log('*****',CartData);
  };

  render() {
      return (
        <div>      
           <div class="product-tab bg-white pt-80 pb-50">
              <div class="container">
                  <div class="row">
                      <div class="col-lg-9 mb-30">                          
                          <div class="tab-content" id="pills-tabContent">                              
                              <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                                  aria-labelledby="pills-home-tab">
                                  <div class="row grid-view theme1">
                                    {this.props.products.map(product => {
                                     return ( 
                                      <div class="col-sm-6 col-lg-4 col-xl-3 mb-30" key={product._id}>
                                          <div class="card product-card">
                                              <div class="card-body">
                                                  <div class="product-thumbnail position-relative">
                                                      <span class="badge badge-danger top-right">New</span>
                                                      <Link to={`/productinfo/${product._id}`}>
                                                          <img class="first-img" src="assets/img/product/1.jpg" alt="thumbnail" />
                                                      </Link>
                                                                                                            
                                                  </div>
                                                  <div class="product-desc py-0">
                                                      <h3 class="title"><a href="shop-grid-4-column.html">{product.pname}</a></h3>
                                                      
                                                      <div class="d-flex align-items-center justify-content-between">
                                                          <h6 class="product-price">Rs. {product.pprice}</h6>
                                                          <form onSubmit={ this.handleSubmit }>
                                                            <input type="hidden" onChange={this.handleChange} name="pid" defaultValue={product._id} />  
                                                            <input type="hidden" onChange={this.handleChange} name="pname" defaultValue={product.pname} />  
                                                            <input type="hidden" onChange={this.handleChange} name="pprice" defaultValue={product.pprice} />  
                                                            <input type="hidden" onChange={this.handleChange} name="qty" defaultValue="1" />  
                                                            <input type="hidden" onChange={this.handleChange} name="pimage" defaultValue={product.pimg} />
                                                            <input type="hidden" onChange={this.handleChange} name="total_price" defaultValue={product.pprice} />
                                                            <button type="submit" class="pro-btn"><i class="icon-basket"></i></button>
                                                          </form> 
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>                                          
                                      </div>
                                     );
                                    })}                                        
                                  </div>
                              </div>                              
                          </div>                         
                      </div>
                  </div>
              </div>
          </div> 
        </div>
      )     
  }
}

const mapStateToProps = (state) => ({ products: state.products });

const mapDispatchToProps = { addToCart, getProducts };

export default connect(mapStateToProps, mapDispatchToProps)(Shop);

Answer 1

如果我的理解是正确的，你想在调用handleSubmit的时候得到this.props.product.map的乘积吗？

您可以将它们传递给 handleSubmit

const handleSubmit = (product) => (evt) => {
  evt.preventDefault();
  const {pid, pname, pprice, pimg} = product;
  ...
}

<form onSubmit={ this.handleSubmit(product) }>
  ...
</form>

或者你可以使用data-x属性

const handleSubmit = (evt) => {
  evt.preventDefault();
  const product = JSON.parse(evt.currentTarget.dataset.product)
  const {pid, pname, pprice, pimg} = product;
  ...
}

<form data-product={product} onSubmit={ this.handleSubmit }>
  ...
</form>