如何将道具数据从渲染传递到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和所有值未定义。

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>