将点击事件 id 传递给 react 和 redux 中的另一个组件

Question

我有一个反应组件“A”，它有一个表格，每一行都有一个按钮，单击该按钮时，我们需要获取每一行的 id，该 id 将传递给另一个组件“B”。

我使用 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 中，我们有链接路径，并且我以粗体突出显示，因为我已经包含了参数并试图在我正在控制台中尝试的另一个组件中获取点击事件的 id。但我没有得到 id ，我不知道这个错误，因为我到目前为止已经尝试过了。

提前致谢；

感谢任何帮助。

Answer 1

如果我没看错，您想知道如何将嵌套按钮的上下文传递给 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>)
    }
}

Answer 2

试试这个，

将您的路线更改为<Route path="/userdashboard/eventdetails/:holidayId" />
并在您的TableList.jsx 中将Link 更改为

<Link to={`/userdashboard/eventdetails/${holiday.id}`} className="calendardetails" onClick={this.handleClick}>

它会将用户holidayId 作为参数的一部分传递。所以你可以在CalenderDetails的渲染方法中访问它，比如var id ={this.props.params.holidayId} ;