передача параметра onClick, React - PullRequest
Новая
       22

передача параметра onClick, React

0 голосов
/ 17 июня 2019

у меня есть этот фрагмент кода: 

const ChangeRequest = ({
  inRelease,
  title,
  requestId,
  cost,
  supervisor,
  chipText,
  description,
  showModal,
}) => (
  <div
    onClick={() => showModal({
      modal: 'changeRequestDetail',
      state: { title },
    })}
    className={styles.crContainer}
  >

Основная проблема

в const ChangeRequest У меня есть значение title, мне нужно передать это значение свойству onClick модала.

модал 

<div
    onClick={() => showModal({
      modal: 'changeRequestDetail',
      state: { title },
    })}
    className={styles.crContainer}
  >

Таким образом, если я попытаюсьдо console.log(title) я получаю undefined в качестве значения.

Вопрос

как передать значение title в значение state show modeal в функции onClick?

Добавлен showModal

, поэтому я назвал его с mapDispatchToProps 

const mapDispatchToProps = {
  showModal: showModalAction,
};

это относительное действие 

export const SHOW_MODAL = 'SHOW_MODAL';
export const HIDE_MODAL = 'HIDE_MODAL';

export function showModalAction(params) {
  return dispatch => dispatch({
    type: SHOW_MODAL,
    payload: params,
  });
}

export function hideModalAction(params) {
  return dispatch => dispatch({ type: HIDE_MODAL });
}

это его редуктор: 

import { Map } from 'immutable';
import { SHOW_MODAL, HIDE_MODAL } from '../actions/modalActions';

const initialState = Map({
  type: null,
  state: null,
});

const modalReducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_MODAL:
      return state
        .set('type', action.payload.modal)
        .set('state', action.payload.state);

    case HIDE_MODAL:
      return state
        .set('type', null)
        .set('state', null);

    default:
      return state;
  }
};

export default modalReducer;

1 Ответ

0 голосов
/ 18 июня 2019

Вчера, после нескольких попыток, мне удалось получить данные. В чем была проблема ?

нам нужно mapStateToProps данные из состояния модала. Зачем ? потому что модал был редуктором. 

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import styles from './styles.module.css';
import BlueLightRow from './BlueLightRow';
import DetailSection from './DetailSection';
import Modal from '../../../components/Modal';
import Header from './Header';

function ChangeDetail({
  title, supervisor, architect, initiator, id, cost, description, chipText,
}) {
  return (
    <Modal noPadding bigDialog>
      {console.log(title)}
      <div className={styles.blueBackground}>
        <div className={styles.container}>
          <Header title={title} chipText={chipText} />
          <BlueLightRow cost={cost} id={id} />
          <DetailSection supervisor={supervisor} architect={architect} claimant={initiator} description={description} />
        </div>
      </div>
    </Modal>
  );
}

ChangeDetail.propTypes = {
  title: PropTypes.string.isRequired,
  architect: PropTypes.string.isRequired,
  initiator: PropTypes.string.isRequired,
  supervisor: PropTypes.string.isRequired,
  id: PropTypes.string.isRequired,
  cost: PropTypes.number.isRequired,
  description: PropTypes.string.isRequired,
  chipText: PropTypes.string.isRequired,
};

const mapStateToProps = state => ({
  title: state.getIn(['modalReducer', 'state', 'title']),
  architect: state.getIn(['modalReducer', 'state', 'architect']),
  initiator: state.getIn(['modalReducer', 'state', 'initiator']),
  supervisor: state.getIn(['modalReducer', 'state', 'supervisor']),
  description: state.getIn(['modalReducer', 'state', 'description']),
  cost: state.getIn(['modalReducer', 'state', 'cost']),
  id: state.getIn(['modalReducer', 'state', 'requestId']),
  chipText: state.getIn(['modalReducer', 'state', 'chipText']),
});

export default connect(mapStateToProps, null)(ChangeDetail);

Если кому-то понадобится больше объяснений по поводу кода, я буду рад углубиться, если смогу :)

...