リアクションとレフィックスの別のコンポーネントにclickイベントIDを渡す

Question

私はテーブルがあり、各行にボタンがあり、そのボタンをクリックすると各行のIDを取得する必要がある反応コンポーネント 'A'が1つあります別のコンポーネント 'B'に渡すことができます。

私はredux storeを使ってデータを持っています。

私のコードは次のとおりです。

Tablelist.jsx：テーブルリストの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; 

、我々はリンクパスを持っていると私は私のように太字で強調しましたparamsを含めて、私がidを取得していないconsole.Butでしようとしている別のコンポーネントでクリックイベントのidを取得しようとすると、私はこれまでこれを試したように間違いを知っていません。

ありがとうございます。

何か助けていただければ幸いです。

Answer 1

質問を正しく読んでいる場合、ネストされたボタンのコンテキストを還元する方法を知りたいのですか？以下は、あなたが戻って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に

、これを試してみてくださいそれはのparamsの一部として、ユーザー holidayIdを渡します Link

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

に変更。あなたは CalenderDetailsレンダリングメソッドでそれにアクセスすることができます var id ={this.props.params.holidayId} ;