如何在一个 onClick/onPress 方法上传递 2 个道具？

Question

我正在使用 React 应用程序，我需要将 id 传递给在 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);

如果可以的话，我可以获取 ID 并使用 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>
     )}
    );

所以，通过上述方式，我得到了完全符合我需要的数据。那么如何实现一些东西来获取我需要的 ID 呢？我需要的是每张卡片上的信息，因为模态包括 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

只需将箭头函数传递给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>
  );
}

这样你可以将 props 作为参数传递。

编辑：由于您想使用 Redux 来控制模式打开和关闭的时间，以及它显示的数据，下面是一个通用示例，说明您可以做什么：

• 创建一个 Reducer 来处理您的 Modal

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 2

由于您的PassengerCardBasedOnRoute 的popupsModalsActionHandler 属性已经有一个名为data 的参数，请使用它来发送您想要的ID：

<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 action creator 在你的action 中添加visiblePassengerId id：

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

然后修改你的reducer来存储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
  }
}

现在连接你的 Container 来监听状态变化： （不知道你是怎么定义redux状态的，请做必要的调整）

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 3

您可以使用匿名函数简单地调用带有 id 的 callModal，也可以使用 bind 传递一个以 id 作为参数的函数。

<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>