- 首页
- 其他开发
- React-Redux:从一页传递到另一页的值
React-Redux:从一页传递到另一页的值
[英] React-Redux: Value passing from one page to another
本文介绍了React-Redux:从一页传递到另一页的值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好，我正在使用 MERN 堆栈构建电子商务应用程序，但我几乎是这些技术的初学者.
redux 将用户输入值传递到新页面时遇到问题.
这是减速机
const PurchaseReducer=(state={},action)=>{开关(动作.类型){案例购买":返回 action.payload;默认:返回状态；}}导出默认PurchaseReducer；
这是动作
<预><代码>const setPurchase=(type,payload)=>{返回{类型:类型，有效载荷:有效载荷}}导出默认 setPurchase;
由于路线很多，我有一个通用的应用程序用于这些目的，我将只包括相关部分.
class Test 扩展组件 {案例结帐":return <CheckoutForm dispatch={this.props.dispatch} user={this.props.user} userobject={this.props.userobject} setproduct={this.props.setproduct} setpurchase={this.props.setpurchase}/>函数 mapStateToProps(state) {返回 {购买:state.PurchaseReducer}}函数 mapDispatchToProps(dispatch) {返回{setpurchase: (type,payload)=>{dispatch(setPurchase(type,payload))}}}导出默认连接(mapStateToProps，mapDispatchToProps)(测试)；
这就是 Redux 方面的全部
然后我们有 DetailForm 这是一个简单的表单，它需要一些用户输入
class DetailForm extends Component {构造函数(道具){超级(道具)；this.state = {名称: ''，地址1 : ''，地址2: ''，城市: ''，邮政编码: ''，现金:假，卡号: ''，CardOtp: '',卡日期:'',显示:真实，}this.HandleSubmit = this.HandleSubmit.bind(this);}HandleSubmit=(e)=>{让数据 = {名称:this.state.name，地址1 : this.state.address1,地址2:this.state.address2，城市:this.state.city，邮政编码:this.state.postalCode，现金:this.state.cash，cardNumber: this.state.cardNumber,CardOtp: this.state.CardOtp,CardDate: this.state.CardDate,};this.props.setpurchase('PURCHASE',data);console.log('提交');控制台日志(数据)；}句柄点击(e){警报对话框()；}onClick=()=>{this.props.setpurchase('PURCHASE',this.state)this.props.dispatch('结帐')}使成为() {const {showing} = this.state;返回(<div><ComplexNavigationNoDrawerdispatch={this.props.dispatch}userobject={this.props.userobject}setpurchase={this.props.setpurchase}/><div className="容器"><纸高度={3} className="纸"><h2>购买详情</h2><卡片><form onSubmit={this.HandleSubmit} ><TextField name={"name"}必需的 id="标准要求"标签=输入名称"className={"usernametext"}/><br/><TextField 名称={"address1"}必需的 id="标准要求"label="输入地址 1"className={"usernametext"}/><br/><TextField 名称={"address2"}必需的 id="标准要求"label="输入地址 2"className={"usernametext"}/><br/><TextField name={"city"}必需的 id="标准要求"标签=城市"className={"usernametext"}/><br/><TextField name={"postalCode"}必需的 id="标准要求"标签=邮政编码"className={"usernametext"}/><br/><br/><p>如果您想货到付款，请按下面的图标</p><br/><表单控件标签名称={现金"}颜色=次要"标签=现金"控制={<无线电/>}className={"用户名文本"}onClick={() =>this.setState({showing: !showing})}>现金支付</FormControlLabel>{显示?<div className="cardDetails"><TextField name={"cardNumber"}必需的 id="标准要求"标签=卡号"className={"usernametext"}/><br/><TextField name={"CardOtp"}必需的 id="标准要求"标签=OTP"className={"usernametext"}/><br/><TextField name={"CardDate"}必需的 id="标准要求"标签=到期日"className={"usernametext"}/>
: 空值}<br/><按钮颜色={"primary"}style={{margin:"20px"}}变体={包含"}className={"用户名文本"}类型={提交"}onClick={()=>{this.onClick()}}>确认</按钮><按钮变体="包含"颜色=次要"style={{margin:"20px"}}className={"用户名文本"}onClick={()=>{this.props.dispatch('CART')}}>取消</按钮></表单></卡片></纸>
);}}导出默认的DetailForm；
此表单的输入应在以下代码中传递并显示
<预><代码>类 CheckoutForm 扩展组件 {构造函数(道具){超级(道具)；this.state = {购买: ''}}ConfirmPurchase(pid) {//无关代码}}使成为() {const 类 = makeStyles({桌子: {最小宽度:650，},});返回 (<div><ComplexNavigationNoDrawerdispatch={this.props.dispatch}userobject={this.props.userobject}setpurchase={this.props.setpurchase}/><div className="容器"><纸高度={3} className="纸"><h2>确认购买</h2><div className="productDetils"><TableContainer 组件={Paper}><表类名={classes.table} aria-label="简单表"><表头><表格行><TableCell>名称</TableCell><TableCell align="right">地址行 1</TableCell><TableCell align="right">地址行 2</TableCell><TableCell align="right">城市</TableCell><TableCell align="right">明信片</TableCell><TableCell align="right">支付方式</TableCell></TableRow></TableHead><表体><TableRow key={this.state.purchase.name}><TableCell component="th" scope="row">{this.state.purchase.name}</TableCell><TableCell align="right">{this.state.purchase.address1}</TableCell><TableCell align="right">{this.state.purchase.address2}</TableCell><TableCell align="right">{this.state.purchase.city}</TableCell><TableCell align="right">{this.state.purchase.postalCode}</TableCell></TableRow></TableBody></表></TableContainer> <按钮变体=包含"颜色=主要"类型={提交"}onClick={()=>{this.confirmPurchase(this.props.product.id)}}>确认</按钮><按钮变体=包含"颜色=主要"onClick={()=>{this.props.dispatch('PAY')}}>后退</按钮><卡片></卡片></纸>
);}}导出默认的 CheckoutForm；
但由于某种原因，输入没有被传递，或者表单的提交不起作用，感谢有关此事的任何帮助！
谢谢！
解决方案
handleSubmit(e) {e.preventDefault();让数据 = {名称:this.state.name，地址1 : this.state.address1,地址2:this.state.address2，城市:this.state.city，邮政编码:this.state.postalCode，现金:this.state.cash，cardNumber: this.state.cardNumber,CardOtp: this.state.CardOtp,CardDate: this.state.CardDate,};this.props.setpurchase("PURCHASE",data);}
我认为您错过了 handleSubmit 方法中的购买"
和
尝试在 Confirm Button 标记 onClick 事件中调用 this.handleSubmit，但是您可以尝试一些很酷的方法来使其更简单
或
尝试在 detailForm 中连接
Hi I am building an eCommerce app using the MERN stack but I'm pretty much a beginner to these technologies.
I'm having an issue with redux passing the user input value to a new page.
This is the reducer
const PurchaseReducer=(state={},action)=> {
switch(action.type){
case 'PURCHASE':
return action.payload;
default:
return state;
}
}
export default PurchaseReducer;
This is the action
const setPurchase=(type,payload)=>{
return{
type:type,
payload: payload
}
}
export default setPurchase;
Since there are many routes, I have a common app for those purposes, I will include only the related parts.
class Test extends Component {
case 'checkout' :
return <CheckoutForm dispatch={this.props.dispatch} user={this.props.user} userobject={this.props.userobject} setproduct={this.props.setproduct} setpurchase={this.props.setpurchase}/>
unction mapStateToProps(state) {
return {
purchase: state.PurchaseReducer
}
}
function mapDispatchToProps(dispatch) {
return{
setpurchase: (type, payload)=>{dispatch(setPurchase(type,payload))}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Test);
That's all for the Redux side
then We have the DetailForm which is a simple form which requires some user input
class DetailForm extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
address1 : '',
address2: '',
city: '',
postalCode: '',
cash: false,
cardNumber: '',
CardOtp: '',
CardDate: '',
showing: true,
}
this.HandleSubmit = this.HandleSubmit.bind(this);
}
HandleSubmit=(e)=>{
let data = {
name: this.state.name,
address1 : this.state.address1,
address2: this.state.address2,
city: this.state.city,
postalCode: this.state.postalCode,
cash: this.state.cash,
cardNumber: this.state.cardNumber,
CardOtp: this.state.CardOtp,
CardDate: this.state.CardDate,
};
this.props.setpurchase('PURCHASE',data);
console.log('submit');
console.log(data);
}
handleCLick(e) {
AlertDialog();
}
onClick=()=>{
this.props.setpurchase('PURCHASE',this.state)
this.props.dispatch('CHECKOUT')
}
render() {
const {showing} = this.state;
return(<div>
<ComplexNavigationNoDrawer
dispatch={this.props.dispatch}
userobject={this.props.userobject}
setpurchase={this.props.setpurchase}
/>
<div className="container">
<Paper elevation={3} className="paper">
<h2>Purchase details</h2>
<Card>
<form onSubmit={this.HandleSubmit} >
<TextField name={"name"}
required id="standard-required"
label="Enter Name"
className={"usernametext"}/><br/>
<TextField name={"address1"}
required id="standard-required"
label="Enter Address 1"
className={"usernametext"} /><br/>
<TextField name={"address2"}
required id="standard-required"
label="Enter Address 2"
className={"usernametext"} /><br/>
<TextField name={"city"}
required id="standard-required"
label="City"
className={"usernametext"} /><br/>
<TextField name={"postalCode"}
required id="standard-required"
label="Postal code"
className={"usernametext"}/><br/><br/>
<p>Press below icon if you wish to pay cash on delivery</p>
<br/>
<FormControlLabel
name={"cash"}
color="secondary"
label="Cash"
control={<Radio/>}
className={"usernametext"}
onClick={() => this.setState({showing: !showing})}
>
Cash payment
</FormControlLabel>
{showing ?
<div className="cardDetails">
<TextField name={"cardNumber"}
required id="standard-required"
label="Card number"
className={"usernametext"}/><br/>
<TextField name={"CardOtp"}
required id="standard-required"
label="OTP"
className={"usernametext"}/><br/>
<TextField name={"CardDate"}
required id="standard-required"
label="Expiry Date"
className={"usernametext"}/>
</div> : null
}
<br/>
<Button color={"primary"}
style={{margin:"20px"}}
variant={"contained"}
className={"usernametext"}
type={"submit"}
onClick={()=>{this.onClick()}}
>Confirm</Button>
<Button variant="contained"
color="secondary"
style={{margin:"20px"}}
className={"usernametext"}
onClick={()=>{this.props.dispatch('CART')}}
>
Cancel
</Button>
</form>
</Card>
</Paper>
</div>
</div>);
}
}
export default DetailForm;
The input from this form should be passed and displayed in the following code
class CheckoutForm extends Component {
constructor(props) {
super(props);
this.state = {
purchase: ''
}
}
confirmPurchase(pid) {//unrelated code}
}
render() {
const classes = makeStyles({
table: {
minWidth: 650,
},
});
return (
<div>
<ComplexNavigationNoDrawer
dispatch={this.props.dispatch}
userobject={this.props.userobject}
setpurchase={this.props.setpurchase}
/>
<div className="container">
<Paper elevation={3} className="paper">
<h2>Confirm purchase</h2>
<div className="productDetils">
<TableContainer component={Paper}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell align="right">Address Line 1</TableCell>
<TableCell align="right">Address Line 2</TableCell>
<TableCell align="right">City</TableCell>
<TableCell align="right">Postal Card</TableCell>
<TableCell align="right">Payment method</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow key={this.state.purchase.name}>
<TableCell component="th" scope="row">{this.state.purchase.name}</TableCell>
<TableCell align="right">{this.state.purchase.address1}</TableCell>
<TableCell align="right">{this.state.purchase.address2}</TableCell>
<TableCell align="right">{this.state.purchase.city}</TableCell>
<TableCell align="right">{this.state.purchase.postalCode}</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</div>
<Button
variant="contained"
color="primary"
type={"submit"}
onClick={()=>{this.confirmPurchase(this.props.product.id)}}
>
Confirm
</Button>
<Button
variant="contained"
color="primary"
onClick={()=>{this.props.dispatch('PAY')}}
>
Back
</Button>
<Card>
</Card>
</Paper>
</div>
</div>
);
}
}
export default CheckoutForm;
But for some reason, the input is not being passed, or rather the submitting of the form isn't working, appreciate any help regarding this matter!
Thank you!
解决方案
handleSubmit(e) {
e.preventDefault();
let data = {
name: this.state.name,
address1 : this.state.address1,
address2: this.state.address2,
city: this.state.city,
postalCode: this.state.postalCode,
cash: this.state.cash,
cardNumber: this.state.cardNumber,
CardOtp: this.state.CardOtp,
CardDate: this.state.CardDate,
};
this.props.setpurchase("PURCHASE",data);
}
i think you have missed "PURCHASE" in the handleSubmit method
AND
Try calling this.handleSubmit in the Confirm Button tag onClick event, but there are some cool ways you can try to make even more simple
Or
Try connect in the detailForm
这篇关于React-Redux:从一页传递到另一页的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
