Как передать 2 реквизита на один метод onClick / onPress?

Question

Я работаю с приложением React, и мне нужно передать идентификатор модалу, который открыт по методу onClick / onPress.

Компонент ниже - это компонент, который я собираюсь использовать для рендеринганекоторые данные, поступающие из массива, это компонент, из которого модал вызывается:

// imports ...

import {
  passengerCardIdAction,
  pickupPassengerCardIdAction,,
} from '../../screens/HomeScreen/actions/homeScreen';

const PassengersInfo = ({
  id, // THIS IS THE ID I NEED
  name,
  address,
  datetime,
  callModal,
  cardinalpoint,
  navigationStore,
}) => {

  return (
    <View>
      <View>
        <View>
         // MAYBE I CAN SET SOMETHING HERE WHERE I GRAB THE ID 
         // ON THE onPress METHOD ALONG WITH THE CALL MODAL FUNCTION
         <TouchableOpacity onPress={callModal}>         
           CALL MODAL
         </TouchableOpacity>
        </View>    
      </View>
    </View>
  );
};

export default compose(
  connect(
    store => ({
      passengerCardId: store.homeScreen.passengerCardId,
      pickupPassengerCardId: store.homeScreen.pickupPassengerCardId,
    }),
    dispatch => ({
      passengerCardIdActionHandler: id => {
        dispatch(passengerCardIdAction(id));
      },
      pickupPassengerCardIdActionHandler: id => {
        dispatch(pickupPassengerCardIdAction(id));
      },       
    }),
  ),
)(PassengersInfo);

Затем этот компонент вызывается здесь:

class PassengerCardBasedOnRoute extends Component {

  const { popupsModalsActionHandler, searchParam } = this.props;
  render() {
    return (
     {passengerInfo.map(info => (
      <View key={info.id}>
        <PassengersInfo
          id={info.id}
          name={info.name}
          address={info.address}
          datetime={info.timestamp}
          searchParam={searchParam}
          cardinalpoint={info.cardinalpoint}
          callModal={popupsModalsActionHandler}
        />
      </View>
     )}
    );
  }
};

export default compose(
  connect(
    store => ({
      searchParam: store.homeScreen.searchParam,
      navigationStore: store.homeScreen.navigation,
      passengerCardId: store.homeScreen.passengerCardId,
      allPassengersDropOffOptionsPopup:
        store.popupsModals.allPassengersDropOffOptionsPopup,
      pickupPassengerCardId: store.homeScreen.pickupPassengerCardId,
    }),
    dispatch => ({
      popupsModalsActionHandler: data => {
        dispatch(popupsModalsAction(data));
      },
      passengerCardIdActionHandler: id => {
        dispatch(passengerCardIdAction(id));
      },
      pickupPassengerCardIdActionHandler: id => {
        dispatch(pickupPassengerCardIdAction(id));
      },
    }),
  ),
)(PassengerCardBasedOnRoute);

Я могу получить идентификатор иустановите его с помощью Redux, если это возможно.Раньше я устанавливал модальную информацию в компоненте PassengersInfo, но так как это массив, модальный вызывается примерно 40 раз, потому что раз родительский компонент рендерится.

Это то, как я делалэто раньше:

    return (
     {passengerInfo.map(info => (
      <View key={info.id}>
        <OptionsModal>
          {
            <AllPassengersOptionsModal
              id={info.id}
              handleDeleteOptionsModal={() =>
                this.handleDeletePassenger(info.id)
              }
              handleCallOptionsModal={() =>
                Linking.openURL(`tel:${info.phone}`)
              }
            />
          }
        </OptionsModal>
        <PassengersInfo
          id={info.id}
          name={info.name}
          address={info.address}
          datetime={info.timestamp}
          searchParam={searchParam}
          cardinalpoint={info.cardinalpoint}
          callModal={popupsModalsActionHandler}
        />
      </View>
     )}
    );

Итак, вышеописанным способом я получал данные именно так, как мне было нужно.Итак, как я могу реализовать что-то, чтобы получить нужный мне идентификатор?Мне нужна информация на каждой карточке отдельно, потому что модал включает в себя такие действия, как delete и call, в частности.

См. Примечания в моем коде.

РЕДАКТИРОВАТЬ, ЧТОБЫ ПОКАЗАТЬ РЕДУКТОРИ АКЦИЯ

действие

export const popupsModalsAction = () => ({
  type: ActionTypes.TOGGLE_ALL_PASSENGERS_MODAL,
});

редуктор

const initialState = {
  allPassengersDropOffOptionsPopup: false,
};

const handlers = {
  [ActionTypes.TOGGLE_ALL_PASSENGERS_MODAL](state) {
    return {
      ...state,
      allPassengersDropOffOptionsPopup: !state.allPassengersDropOffOptionsPopup,
    };
  },
};

Answer 1

Поскольку popupsModalsActionHandler реквизит вашего PassengerCardBasedOnRoute уже имеет параметр с именем data, используйте его для отправки желаемого идентификатора:

<PassengersInfo
  id={info.id}
  name={info.name}
  address={info.address}
  datetime={info.timestamp}
  searchParam={searchParam}
  cardinalpoint={info.cardinalpoint}
  callModal={() => popupsModalsActionHandler(info.id)} // add which id you want to display in modal
/>

Теперь измените popupsModalsAction создатель действий, чтобы добавитьvisiblePassengerId id в вашем действии:

export const popupsModalsAction = (visiblePassengerId) => ({
  type: ActionTypes.TOGGLE_ALL_PASSENGERS_MODAL,
  visiblePassengerId
});

Затем измените ваш редуктор, чтобы сохранить action.visiblePassengerId:

const initialState = {
  allPassengersDropOffOptionsPopup: false,
  visiblePassengerId: null
};


function modalReducer(state = initialState, action) {
  switch (action.type) {
    case ActionTypes.TOGGLE_ALL_PASSENGERS_MODAL:
      return {
        ...state,
        allPassengersDropOffOptionsPopup: !state.allPassengersDropOffOptionsPopup,
        visiblePassengerId: action.visiblePassengerId // your action has a visiblePassengerId payload now, save it too
      };
    default:
      return state
  }
}

Теперь подключите ваш контейнер для прослушивания изменений состояния: (Iне знаю, как вы определили состояние притока, пожалуйста, внесите необходимые изменения)

class Modal extends React.Component {
  render() {
    const {open, passengerId, passengerInfo} = this.props;
    if(!open) return null; // if the state is not open, don't render anything

    const info = passengerInfo[passengerId]; // otherwise get the info using the id

    return (
      <OptionsModal>
        <AllPassengersOptionsModal
          id={info.id}
          //... other things
        />
      </OptionsModal>
    )
  }
}

// change depending on your redux state
export default connect(state => ({
  open: state.foo.allPassengersDropOffOptionsPopup, // modified by the reducer above
  passengerId: state.foo.visiblePassengerId,  // modified by the reducer above
  passengerInfo: state.bar.passengerInfo // all passengers info, we will get the one using passengerId
}, 
  dispatch => (
    // add as you need them
  )
))(Modal)

Надеюсь, это поможет.

Answer 2

Просто передайте функцию стрелки в onPress, вот так: onPress={() => callModal(this.props.id)}.

Вот пример функции, которую я использую в одном из своих побочных проектов:

static propTypes = {
        id: PropTypes.number.isRequired,
        callbackReroll: PropTypes.func.isRequired,
}

rerollButtonPress = () => {
        this.props.callbackReroll(this.props.id);
        this.swipeRowRef.closeRow();
}

render() {
  return(
    <TouchableRipple
    onPress={this.rerollButtonPress}>
       ...
    </TouchableRipple>
  );
}

Этоспособ передачи реквизитов в качестве аргументов.

РЕДАКТИРОВАТЬ: Поскольку вы хотите использовать Redux для контроля, когда модальное окно открывается и закрывается, а также данные, которые он показывает, вот общий примерчто вы могли бы сделать:

• Создать редуктор для обработки вашего модального

const initialState = {
  shouldModalOpen: false,
  modalData: {},
};

const handlers = {
  [ActionTypes.TOGGLE_MODAL](state, { data }) {
    return {
      ...state,
      shouldModalOpen: !state.shouldModalOpen
      modalData: data,
    };
  },
};

• Подключите компонент, который вызывает ваш модальный режим, к Redux и проверьте наличие shouldModalOpen флаг:

<View>
    <OptionsModal>
        {
          this.props.shouldModalOpen
            ? <AllPassengersOptionsModal
              data={this.props.modalData} />
            : null;          
        }
    </OptionsModal>
</View>

Answer 3

Вы можете либо просто вызвать callModal с идентификатором id, используя анонимную функцию, либо передать ему функцию, идентификатор которой в качестве аргумента использует bind.

<TouchableOpacity onPress={()=>{
  callModal(id)
}}>         
  CALL MODAL
</TouchableOpacity>

ИЛИ

<TouchableOpacity onPress={callModal.bind(null,id)}>         
  CALL MODAL
</TouchableOpacity>

Answer 4

Вы можете просто передать нужные параметры в качестве аргумента вызываемой функции.

Попробуйте эту опцию с ожидаемыми параметрами popupsModalsActionHandler.

 <TouchableOpacity onPress={() => callModal(id)}>         
   CALL MODAL
 </TouchableOpacity>