reactjs - 需要传递相同组件的值

问题描述

我需要为同一个组件传递值

我需要在这里传递我的价值

<tr>
                    <td><b>Past</b></td>
                    <td className="hrs_applicant_data"><b>tes</b></td>
                  </tr>

这是我的代码

import React, { Component } from 'react';
import axios from 'axios';
import {UIPageSubNav} from '../../helpers/UI';
import {SpaceDiv} from '../../helpers/Generic';

//import ViewJobs from './ViewJobs';
//import PostJob from './PostJob';

import ViewApplicantDetails from './ViewApplicantDetails';

import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';
import {Tabs, Tab} from 'react-bootstrap-tabs';
import Popup from 'react-popup';

export default class ViewApplicants extends Component {

  constructor(props) {
    super(props);
    this.state = {
        //applicantResults:[],        
        //searchExperiencesResults: [],
        //searchMessagesResults: [],
        jobTitleList: null
    };


  }   

  // onReloadPage(callbackRef) {
  //   console.dir(callbackRef);
  //   this.onGetApplicants(callbackRef);
  // }

  onClickFitStaus(){

  }

  onClickApplicantDetails(personId){

    console.log(personId.props.applicantData.PersonId);
    var personId = personId.props.applicantData.PersonId;
    var self = this;
    axios.get(window.mg.api.baseURL + 'applicantdetails' + '/'+ personId, { // use id because personId != id
    })
    .then(function (response) {
      var items = [];
      var Element = [];
      var index = [];
      var experience: []
      //console.log(response.data.results.experience);
      var experience = response.data.results.experience;


      console.log(experience);
  //return false;
        var applicantResult = response.data.results.main[0];
        var id =  personId;
        //console.log(experience);
        // self.setState({applicantResults: response.data.results.main[0]});
        // self.setState({searchMessagesResults: response.data.results.message});
        // self.setState({searchExperiencesResults: response.data.results.experience});

        // let mySpecialPopup = Popup.register({
        //     title: 'I am special',
        //     content: 'Since I am special you might need me again later. Save me!',
        //     buttons: {
        //         left: ['cancel'],
        //         right: ['ok']
        //     }
        // });

        // Popup.alert('Hello');

      //   Popup.create({
      //     title: 'Immediate popup',
      //     content: 'This popup will be displayed straight away',
      //     className: 'alert',
      //     buttons: {
      //         right: ['ok']
      //     }
      // }, true);

        //Popup.queue(mySpecialPopup);

        window.mg.popupRef.customPopup(

          <ViewApplicantDetails applicantData={applicantResult} pid={id}  customPopup={true} />
        );

        //check if we need to tell the callee to update too (React's smart update needed or not doesn't alway work the way I want)

    })
    .catch(function (error) {
      console.log('error');
      console.dir(error);
      window.mg.popupRef.alert('Error getting data, please try again in a minute.');
    });



  }

  // onClick(e) {
  //   // passes our data back up to the Employees component
  //   this.props.onClickRef(this.props.applicantData);
  // }

  onClickUpdateFit(fitStatus, personId){

    // if (this.props.hasOwnProperty('userData') === false) {
    //   return (<div></div>);
    // }
    console.log(personId);
    console.log(this.props.screenData);

    var userId = 2;

    axios.post(window.mg.api.baseURL + 'fitstatusupdate', {
      headers: {
        'X-CSRF-TOKEN': window.mg.api.token,
        'Content-Type':'application/x-www-form-urlencoded'
      },
      params: {
        personId: personId,
        fitStatus: fitStatus,
        message: null,
        userId: userId
      }

    }).then(response => {


    }).catch(function(thrown) {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // handle error
          console.log('Error', thrown.message);
      }
    });

  }

  render() {
    var self = this;

    var applicant = this.props.applicantData;
    const jobtitle = this.state.jobTitleList;
    console.log(applicant);

    return (

      <div className="hrs_applicant_main_container">
      <div className="sod_applicant_container">
          <div className="sod_job_company_logo">
            <img src={applicant.imgUrl} />
          </div>
          <div className="sod_job_details">
            <div className="sod_job_header">
              <div className="sod_job_info">
                <h3 onClick={this.onClickApplicantDetails.bind(applicant.personId,this)}>{applicant.Name}</h3>
                <span>{applicant.location}, {applicant.country}</span>
              </div>
              <div className="sod_job_salary">
                <div>
                  <span><b>Date Uploaded</b></span>
                  <span>{applicant.created_at}</span>
                </div>            
              </div>
              <div className="sod_job_location">
                <img src="../../images/icon_upload.png" />
                <div>
                  <span><b>CV</b></span>
                </div>            
              </div>

            </div>
            <div className="sod_job_content">
              <div className="hrs_applicant_details">
                <table className="hrs_applicant_datas">
                  <tr>
                    <td><b>Current</b></td>
                    <td className="hrs_applicant_data"><b>{applicant.created_at}</b></td>
                  </tr>
                  <tr>
                    <td><b>Past</b></td>
                    <td className="hrs_applicant_data"><b>tes</b></td>
                  </tr>
                  <tr>
                    <td><b>Education</b></td>
                    <td className="hrs_applicant_data"><b>CIPD, MCIPD | 2013</b></td>
                  </tr>

                </table>               

              </div>


            </div>
          </div>
        </div>
        <div className="hrs_applicant_action">
          <div className="BTNFilled BTNOutlineFilled" onClick={() => this.onClickUpdateFit(0, applicant.PersonId)}>
           <i class="fa fa-times"></i>  <img src="/images/img_close.png" alt="" className="notFitIconImg" />
           NOT A FIT
          </div>
          <div className="BTNFilled BTNOutlineFilled" onClick={() => this.onClickUpdateFit(1, applicant.PersonId)}>
            <img src="/images/img_tick.png" alt="" className="fitIconImg" />
            GOOD FIT
          </div>
          <div className="BTNFilled BTNOutlineFilled"  onClick={this.onClickApplicantDetails.bind(applicant.personId,this)}>
            <img src="/images/message-icon.png" alt="" className="fitIconImg" />
            MESSAGE
          </div>
          <div className="BTNFilled BTNOutlineFilled DropdownButton">
           <Dropdown options={jobtitle} onChange={this._onSelect} placeholder="ASSOCIATE TO JOB POSTING" />
          </div>
        </div>

      </div>
    )

    var BTNStyle = {};
    BTNStyle.marginRight = "10px";
    BTNStyle.marginLeft = "0px";
    BTNStyle.marginBottom = "30px";      


  }     

}

标签： reactjs

reactjs - 需要传递相同组件的值

问题描述

解决方案

推荐阅读