我有一个反应组件'A'，它有一个表，每行都有一个按钮，点击该按钮，我们需要得到每一行的id，并将该id传递给另一个组件'B'。 / p>
我使用了redux store来获取数据。
我的代码是：
Tablelist.jsx：
import React from 'react';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {upcoming_holiday_details} from '../actions/index.jsx'
import {upcoming_holiday_detail_reducer} from '../reducers/upcomingholidaydetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
class UpcomingHolidays extends React.Component{
constructor(props)
{
super(props);
this.state = { Upcoming_HolidayList: [] };
this.handleclick =this.handleclick.bind(this);
}
componentDidMount()
{
this.props.upcoming_holiday_details();
this.setState({Upcoming_HolidayList:this.props.upcoming_holiday_details()})
}
handleclick:function()
{
this.props.details_holidays(this.props.Upcoming_HolidayList.upcomingholidaylist_data.id);
console.log('generate deta based on holidayssssssss',this.props.Upcoming_HolidayList.upcomingholidaylist_data.id)
return false;
}
render()
{
/* The data from reducer is objects of objects type and so the conversion into array of objects an dpassing into
components for processing.
*/
const rows = this.props.Upcoming_HolidayList.upcomingholidaylist_data;
var arr_list=[];
for (var key in rows) {
rows[key].hdate = rows[key].start_date.split('-').splice(2);
var month_split = rows[key].start_date.split('-').splice(1);
rows[key].hmonth = month_split[0];
arr_list.push(rows[key])
}
/* based on the response from store is empty or not and we test it on if statement the response template changes */
let userMessage;
if (rows[key].id!="" && rows[key].name!="" && rows[key].start_date!="" && rows[key].end_date!="" && rows[key].description!="" )
{
userMessage =(
<div className="panel-body event">
{arr_list && arr_list.map((holiday) => {
return <div className="notice-calendar-list clearfix">
<div className="notice-calendar">
<span className="month">{holiday.hmonth}</span>
<span className="date">{holiday.hdate}</span>
</div>
<div className="notice-calendar-heading">
<h5 className="notice-calendar-heading-title">
<Link to='/userdashboard/eventdetails'>{holiday.name}</Link>
</h5>
<div className="notice-calendar-date"><span className="text-danger">End Date: </span>
{holiday.end_date}
</div>
</div>
<div className="calendarview">
<span className="pull-right">
<strong>**<Link to='/userdashboard/eventdetails' params={click_id:holiday.id} className="calendardetails" onClick={this.handleClick}>View Details</Link>**</strong>
</span>
</div>
</div>
})}
</div>
)
}
else
{
userMessage =(
<div className="panel-body event">
<h6> Sorry!!!There are no UpcomingHolidays in this month !!!</h6>
</div>
)
}
/* Based on the conditional check,the userMessage value inside the component is rendered */
return(
<div className="panel panel-info">
<div className="panel-heading">
<h2 className="panel-title"><i className="fa fa-binoculars"></i><strong> Upcoming Holidays</strong><span className="pull-right"><Link to='/userdashboard/holidayslist' className=" view-all-front">View All</Link></span></h2>
</div>
{userMessage}
</div>
);
}
}
function mapStateToProps(state,props) {
console.log(state,'state listt')
return {
Upcoming_HolidayList: state
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({
upcoming_holiday_details: upcoming_holiday_details}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(UpcomingHolidays);
Tableitemviewdetails.jsx
import React from 'react';
import { Router, Link , Route, Switch ,browserHistory } from 'react-router';
import {upcoming_holiday_details} from '../actions/index.jsx'
import {upcoming_holiday_detail_reducer} from '../reducers/upcomingholidaydetails.jsx'
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
class EventDetails extends React.Component{
constructor(props)
{
super(props);
this.state = {
Upcoming_HolidayList: []
};
}
componentDidMount()
{
this.props.upcoming_holiday_details();
this.setState({Upcoming_HolidayList:this.props.upcoming_holiday_details()})
}
render()
{
/* The data from reducer is objects of objects type and so the conversion into array of objects an dpassing into
components for processing.
*/
/* the id from upcoming holidays page passed here to view it */
**var id ={this.props.params.click_id} ;
console.log(id ,'id in event detailssssssssssssss');**
}
return(
<div className="container">
<div className="row">
<div className="margin">
<div className="col-md-12">
<div className="main_content">
<div className="row">
<div className="col-md-12">
<div className="panel panel-info">
<div className="panel-heading">
<div className="panel-title">
<strong>Event Details</strong><span className="pull-right"><Link to='/userdashboard/home' className="view-all-front btn btn-default">Go Back</Link></span>
</div>
</div>
<div className="panel-body form-horizontal">
<div className="col-md-12 notice-details-margin">
<div className="col-sm-4 text-right">
<label className="control-label"><strong>Title:</strong></label>
</div>
<div className="col-sm-8">
<p className="form-control-static">Tamil New Year</p>
</div>
</div>
<div className="col-md-12 notice-details-margin">
<div className="col-sm-4 text-right">
<label className="control-label"><strong>Description:</strong></label>
</div>
<div className="col-sm-8">
<p className="form-control-static text-justify">Tamil New Year</p>
</div>
</div>
<div className="col-md-12 notice-details-margin">
<div className="col-sm-4 text-right">
<label className="control-label"><strong>Start Date:</strong></label>
</div>
<div className="col-sm-8">
<p className="form-control-static"><span className="text-success">14 Apr 2017</span></p>
</div>
</div>
<div className="col-md-12 notice-details-margin">
<div className="col-sm-4 text-right">
<label className="control-label"><strong>End Date:</strong></label>
</div>
<div className="col-sm-8">
<p className="form-control-static"><span className="text-danger">14 Apr 2017</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default EventDetails;
在表格列表jsx中，我们有链接路径，我以粗体突出显示，因为我已经包含了参数并尝试在我在控制台中尝试的另一个组件中获取click事件的id。但我没有得到id ，我不知道这个错误，因为我到目前为止已经尝试过这个。
提前致谢;
感谢任何帮助。
答案 0 :(得分：0)
如果我正确地阅读了这个问题，您是否想知道如何将嵌套按钮的上下文传递给redux？下面是一个简单的例子，说明如何将按钮道具或按钮索引发送回redux函数：
class ComponentA extends React.Component {
render() {
const {
listOfButtonContext = [{id: 'btn1'}, {id: 'btn2'}],
callbackToRedux = (btnContext)=> {
console.log(btnContext)
}
} = this.props
return (<table>
{
listOfButtonContext
.map((btnContext, btnIdx)=><button onClick={()=>{callbackToRedux(btnContext)}}>{btnContext.id}</button>)
}
</table>)
}
}
答案 1 :(得分：0)
试试这个，
将您的路线更改为<Route path="/userdashboard/eventdetails/:holidayId" />
并在TableList.jsx更改Link至
<Link to={`/userdashboard/eventdetails/${holiday.id}`} className="calendardetails" onClick={this.handleClick}>
它会将用户holidayId作为params的一部分传递。因此，您可以使用CalenderDetails的呈现方法var id ={this.props.params.holidayId} ;