Question

我有这段代码：

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作为值。

问题

如何在onClick函数中将title的值传递给show modal的值state？

添加了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;

Answer 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.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);

如果有人需要更多有关代码的说明，我将很乐意深入:)

传递参数onClick，React

1 个答案: