Question

我想从子组件的click事件中将组件prop作为负载分配给我的商店：

const Aircraft = ({ ident, type, base, handleOnClick }) => (
    <div className="item" onClick={handleOnClick}>
        <i className="large plane middle aligned icon"></i>
        <div className="content">
            <div className="header">{ident}</div>
            <div className="description">{type}</div>
            <div className="description">{base}</div>
        </div>
    </div>
);

所以我想将ident分发到handleOnClick。

click事件作为道具从父组件传递并从redux容器映射。

const AircraftList = ({ aircraftList, setCurrentAircraft }) => (
    <div className="ui relaxed celled list">
        {aircraftList.map((el, index) => (
            <Aircraft key={index} {...el} handleOnClick={setCurrentAircraft} />
        ))}
    </div>
);

Redux容器：

import { connect } from 'react-redux';
import AircraftList from '../../components/AircraftList/AircraftList';
import { setCurrentAircraft } from '../../actions/actions';

const mapStateToProps = state => {
  return {
    aircraftList: state.aircraft,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    setCurrentAircraft: (e) => {
      dispatch(setCurrentAircraft(ident));
    }
  };
};

const AircraftListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(AircraftList);

export default AircraftListContainer;

我不确定如何将标识从子组件传递到分派并随后更新商店？

Answer 1

如果您需要在event中使用setCurrentAircraft对象，请添加ident作为第二个参数，否则保留ident作为唯一参数。

const mapDispatchToProps = (dispatch) => {
  return {
    setCurrentAircraft: (e, ident) => { // If `event` needed, else `(ident)`
      dispatch(setCurrentAircraft(ident));
    }
  };
};

然后将handleOnClick上的Aircraft包装在另一个函数中，以将ident作为参数。

const Aircraft = ({ ident, type, base, handleOnClick }) => (
    <div className="item" onClick={(e) => handleOnClick(e, ident)}> // or just handleOnClick(ident)
        {/* ... */}
    </div>
);

Answer 2

尝试一下。您需要绑定您的点击处理程序并从中分派操作。您还需要在子组件中的某个位置分配ident值，以便可以访问它。

Redux容器

import { connect } from 'react-redux';
import AircraftList from '../../components/AircraftList/AircraftList';
import { setCurrentAircraft } from '../../actions/actions';
class AircraftListContainer extends React.Component {
constructor(props) {
super(props)
}
handleClick = (e) => {
const ident = e.currentTarget.getAttribute("data-ident")
this.props.setCurrentAircraft(ident)
}
render () {
return (<AircraftList aircraftlist={this.props.aircraftlist} handleClick= 
{this.handleClick} />)
  }
}
 const mapStateToProps = state => {
  return {
    aircraftList: state.aircraft,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    setCurrentAircraft: (ident) => {
      dispatch(setCurrentAircraft(ident));
    }
  };
};

export default connect(mapStateToProps, 
mapDispatchToProps)(AircraftListContainer);

AircraftList

const AircraftList = ({ aircraftList, handleClick }) => (
    <div className="ui relaxed celled list">
        {aircraftList.map((el, index) => (
            <Aircraft key={index} {...el} handleOnClick={handleClick} />
        ))}
    </div>
);

飞机

const Aircraft = ({ ident, type, base, handleOnClick }) => (
    <div className="item" onClick={handleOnClick} data-ident={ident}>
        <i className="large plane middle aligned icon"></i>
        <div className="content">
            <div className="header">{ident}</div>
            <div className="description">{type}</div>
            <div className="description">{base}</div>
        </div>
    </div>
);

派发道具作为参数以从React Redux容器中存储

2 个答案: