javascript - 在 onClickEvent 上将值传递给 ReactJs 中的另一个组件不起作用
问题描述
我将值传递给另一个组件 onclickEvent,但值不会传递给另一个组件并显示空引用。
我有两个组件,它们是 DriverCards 和 DriverPendingOrders。我想将 orderId 的值从 DriverCards 传递给 DriverPendingOrders。
下面是我的两个工作组件。
这是 DriverCard 组件
import React, { Component } from 'react';
import { connect } from "react-redux";
import PropTypes from "prop-types";
export default class DriverCard extends Component{
constructor(props) {
super(props);
}
render(){
let { OrderID,CID,DeliveryEst,DeliveryInstructions,DriverID,Orders,PrepInsruction,RID,Status,Total } = this.props.indOrder;
return(
<div class="container">
<div class="card" style={{width:'100%',borderRadius:'2%', border: '4px solid lightgreen'}}>
<div class="card-body" style={{textAlign:'center'}}>
<h4 class="card-title">{CID}</h4>
<p class="card-text"><h5>{RID}</h5></p>
{/* <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> */}
<button type="button" onClick={() => {this.props.removeOrder(OrderID);this.props.showOrder.bind(this,OrderID)}}class="btn btn-success btn-sm" style={{width:'50%'}}>Accept</button>
<button type="button" class="btn btn-danger btn-sm" style={{width:'50%'}}>Decline</button>
</div>
</div>
</div>
)
}
}
下面是 DriverPendingOrder 组件,我想在其中获取从 DriverCard 传递的 orderID。
import React, { Component } from 'react'
import { connect } from "react-redux";
import PropTypes from "prop-types";
import DriverPendingCard from './DriverPendingCard';
export class DriverPendingOrders extends Component{
constructor() {
super();
this.state = {
Orderslist: [
{
OrderID:parseInt("001"),
CID:123,
DeliveryEst:"",
DeliveryInstructions:"Door",
DriverID:"",
Orders:"ABC",
PrepInsruction:"Mild",
RID:"A",
Status:"",
Total:""
},
{
OrderID:parseInt("002"),
CID:456,
DeliveryEst:"",
DeliveryInstructions:"Front Door",
DriverID:"",
Orders:"BCD",
PrepInsruction:"Medium",
RID:"B",
Status:"",
Total:""
},
{
OrderID:parseInt("003"),
CID:678,
DeliveryEst:"",
DeliveryInstructions:"Gate",
DriverID:"",
Orders:"DEF",
PrepInsruction:"Spicy",
RID:"C",
Status:"",
Total:""
}
]
}
}
showOrder(OrderID) {
this.setState({ Orderslist: this.state.Orderslist.filter(order=> order.OrderID == OrderID)});
}
render(){
let dCard1 = this.state.Orderslist.map(order => {
return (
<DriverPendingCard key={order.OrderID} showOrder={this.showOrder.bind(this)} inOrder1={order}/>
)
})
return(
<div>
<ul class="list-group">
{dCard1}
</ul>
</div>
)
}
}
export default DriverPendingOrders;
解决方案
试试看
司机卡:
<button onClick={this.add}>Add</button>
...
...
add = () => {
this.props.passId(id);
}
DriverPendingOrder:
import { DriverCard } from "../DriverCard";
...
...
<DriverCard passId={this.changedId}/>
...
...
changedId = passedId => {
this.setState({
id: passedId
});
};
推荐阅读
- php - 如何从数组中获得比目标更小的值
- php - 从数组中查找唯一值
- google-cloud-platform - 谷歌云语音库 1.8 不起作用
- ag-grid - 当我两次设置 Ag-Grid 的行数据时,我更改了其中的单元格值。但是第二个设置不刷新表
- javascript - JavaScript/PHP:成功保存后的警告对话框
- nginx - nginx:如果启用,则自动侦听 IPv6
- r - 有没有办法根据 hcboxplot() 中的组为箱线图着色?
- spring-boot - 如何将 HTTP URL 传递给 antMacher
- javascript - 如何使用 vue 监听 html 标签的 onload 事件?
- php - 使用laravel excel映射具有多个标题的查询结果