首页 其他开发 如何将道具数据从渲染传递到 redux 中的 handleSubmit 函数
如何将道具数据从渲染传递到 redux 中的 handleSubmit 函数
[英] How to Pass Props data from render to handleSubmit function in redux
本文介绍了如何将道具数据从渲染传递到 redux 中的 handleSubmit 函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 {this.props.products.map(product => { <h1> {product.productName} </h1> } )}; 现在我想要这个 productName 和 handleSubmit 函数中的其他详细信息.
但是当我点击 ，我得到了 pid、pname 和所有值 未定义 在控制台中.
import React, { Component } from 'react';从'react-redux'导入{连接}；从'react-router-dom'导入{链接}；从'../actions/productsAction'导入{getProducts}；从'../actions/cartAction'导入{ addToCart };类商店扩展组件{构造函数(道具){超级(道具)；this.state = {pid: '',姓名: '',价格:''，pimg: '',数量:'',总价格:''};}componentDidMount() {this.props.getProducts();让 getValue = localStorage.getItem(userData");this.setState({getValue: JSON.parse(getValue),});}handleChange = (事件) =>{this.setState({ [event.target.name]: event.target.value });};handleSubmit = (事件) =>{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;常量数量=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);};使成为() {返回 (<div><div class="product-tab bg-white pt-80 pb-50"><div class="container"><div class="row"><div类=col-lg-9 mb-30"><div class="tab-content";id="pills-tabContent"><div class="tab-pane淡出显示活动";id =药丸之家"角色=tabpanel"aria-labelledby="pills-home-tab"><div class="row grid-view theme1">{this.props.products.map(product => {返回 (<div class="col-sm-6 col-lg-4 col-xl-3 mb-30";键={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><链接到={`/productinfo/${product._id}`}><img class="first-img";src="assets/img/product/1.jpg";alt=缩略图"/></链接> <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}<form onSubmit={ this.handleSubmit }><输入类型=隐藏"onChange={this.handleChange} name=pid"；defaultValue={product._id}/><输入类型=隐藏"onChange={this.handleChange} name=pname"；defaultValue={product.pname}/><输入类型=隐藏"onChange={this.handleChange} name=pprice"；defaultValue={product.pprice}/><输入类型=隐藏"onChange={this.handleChange} name=数量"；默认值=1"/><输入类型=隐藏"onChange={this.handleChange} name=pimage"；defaultValue={product.pimg}/><输入类型=隐藏"onChange={this.handleChange} name=total_price"；defaultValue={product.pprice}/><按钮类型=提交"class=pro-btn"><i class=icon-basket"></i></button></表单>
);})}
)}}const mapStateToProps = (状态) =>({ 产品: state.products });const mapDispatchToProps = { addToCart, getProducts };导出默认连接(mapStateToProps，mapDispatchToProps)(商店)；
解决方案
如果我的理解是正确的，你想在调用handleSubmit时得到this.props.product.map的乘积吗?
您可以将它们传递给 handleSubmit
const handleSubmit = (product) =>(evt) =>{evt.preventDefault();const {pid, pname, pprice, pimg} = 产品；...}<form onSubmit={ this.handleSubmit(product) }>...</表单>或者你可以使用 data-x 属性
const handleSubmit = (evt) =>{evt.preventDefault();const product = JSON.parse(evt.currentTarget.dataset.product)const {pid, pname, pprice, pimg} = 产品；...}<form data-product={product} onSubmit={ this.handleSubmit }>...</表单>
I fetched products data and render in html using {this.props.products.map(product => { <h1> {product.productName} </h1> } )};
Now i want this productName and other details in handleSubmit function.
But when i click <button type="submit" class="pro-btn"><i class="icon-basket"></i></button>, i got pid, pname and all values Undefined in console.
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);
解决方案
If my understanding is correct, do you want to get the product of this.props.product.map when invoking handleSubmit?
you can pass them into handleSubmit
const handleSubmit = (product) => (evt) => {
evt.preventDefault();
const {pid, pname, pprice, pimg} = product;
...
}
<form onSubmit={ this.handleSubmit(product) }>
...
</form>
or you can use data-x attribute
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>
这篇关于如何将道具数据从渲染传递到 redux 中的 handleSubmit 函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
