Передача параметра onClick, React
у меня есть этот кусок кода:
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.info(title), я получу undefined в качестве значения.
Вопрос
как я могу передать значение заголовка в значение state модального показа в функции 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;
да, заголовок на самом деле имеет значение, я уверен в этом, потому что, если я попытаюсь {console.info(title) вне div с помощью onClick, я получу точное значение заголовка. Я публикую это!
@Legeo хорошо, во-первых, почему ваше действие возвращает функцию, а не просто объект. Похоже, вы сделали действие SHOW_MODAL так, как будто это действие асинхронного типа redux-thunk, но это не так, просто мне кажется, что это обычное синхронное действие. Во-вторых, где значение теряется, когда вы проверяете action.payload.state в случае редуктора SHOW_MODAL?
Можете ли вы передать это так: state: title вместо этого state: {title}, это сработает?
Ответы 1
Вчера после нескольких попыток мне удалось получить данные. В чем была проблема ?
нам нужно 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.info(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);
Если кому-то понадобится больше объяснений о коде, я буду рад углубиться, если смогу :)
Итак, я предполагаю, что в ваших функциях
ChangeRequestиonClick, если вы напечатаетеtitleна этих шагах, оно действительно получит значение. Если нет, то сначала разберитесь с этим. Но если он определен, можете ли вы добавить свою функциюshowModalи то, как она пытается получить доступ к этому значению заголовка.