React Native中如何给子组件绑定带参数的处理函数？

嘿，作为React Native新手能想到复用逻辑、避免重复代码，这点特别棒！针对你想用同一个父组件方法处理多个DateTimePickerComponent的需求，有两种简单又符合你「父组件处理所有Props，子组件仅负责展示」思路的实现方式：

方法一：使用柯里化函数（Currying） #

在父组件里定义一个返回函数的函数，先接收dateTimePickerId，再返回一个处理选中日期的函数。这样每个子组件可以拿到绑定了自身id的专属处理函数，调用时直接传选中的日期即可。

父组件代码示例 #

import React, { useState } from 'react';
import DateTimePickerComponent from './DateTimePickerComponent';

const TemporaryCardRequestScreen = () => {
  const [selectedDates, setSelectedDates] = useState({
    picker1: null,
    picker2: null,
    // 可根据需求添加更多选择器的初始状态
  });

  // 柯里化的处理函数：先接收选择器id，返回处理日期的函数
  const handleDatePicked = (dateTimePickerId) => (selectedDate) => {
    console.log(`选择器 ${dateTimePickerId} 选中了日期：`, selectedDate);
    // 根据id更新对应状态
    setSelectedDates(prev => ({
      ...prev,
      [dateTimePickerId]: selectedDate
    }));
  };

  return (
    <div>
      {/* 给每个子组件传入对应id和绑定好的处理函数 */}
      <DateTimePickerComponent
        onDatePicked={handleDatePicked("picker1")}
        selectedDate={selectedDates.picker1}
      />
      <DateTimePickerComponent
        onDatePicked={handleDatePicked("picker2")}
        selectedDate={selectedDates.picker2}
      />
    </div>
  );
};

export default TemporaryCardRequestScreen;

子组件代码示例 #

子组件只负责展示日期选择器，选中日期时直接调用传入的onDatePicked即可，完全不用关心逻辑处理：

import React from 'react';
import { DateTimePicker } from '@react-native-community/datetimepicker';

const DateTimePickerComponent = ({ selectedDate, onDatePicked }) => {
  const handleChange = (event, date) => {
    if (date) {
      // 仅传递选中的日期给父组件
      onDatePicked(date);
    }
  };

  return (
    <DateTimePicker
      value={selectedDate || new Date()}
      mode="date"
      onChange={handleChange}
    />
  );
};

export default DateTimePickerComponent;

方法二：在子组件调用时传递额外参数 #

如果不想用柯里化，也可以在子组件的onChange事件里，用箭头函数把dateTimePickerId和选中的日期一起传给父组件的方法。

父组件代码示例 #

import React, { useState } from 'react';
import DateTimePickerComponent from './DateTimePickerComponent';

const TemporaryCardRequestScreen = () => {
  const [selectedDates, setSelectedDates] = useState({
    picker1: null,
    picker2: null,
  });

  // 直接接收两个参数：选中的日期和选择器id
  const handleDatePicked = (selectedDate, dateTimePickerId) => {
    console.log(`选择器 ${dateTimePickerId} 选中了日期：`, selectedDate);
    setSelectedDates(prev => ({
      ...prev,
      [dateTimePickerId]: selectedDate
    }));
  };

  return (
    <div>
      <DateTimePickerComponent
        dateTimePickerId="picker1"
        onDatePicked={handleDatePicked}
        selectedDate={selectedDates.picker1}
      />
      <DateTimePickerComponent
        dateTimePickerId="picker2"
        onDatePicked={handleDatePicked}
        selectedDate={selectedDates.picker2}
      />
    </div>
  );
};

export default TemporaryCardRequestScreen;

子组件代码示例 #

子组件需要保存自身的dateTimePickerId，选中日期时把id和日期一起传给父组件：

import React from 'react';
import { DateTimePicker } from '@react-native-community/datetimepicker';

const DateTimePickerComponent = ({ dateTimePickerId, selectedDate, onDatePicked }) => {
  const handleChange = (event, date) => {
    if (date) {
      // 同时传递选中的日期和当前选择器的id
      onDatePicked(date, dateTimePickerId);
    }
  };

  return (
    <DateTimePicker
      value={selectedDate || new Date()}
      mode="date"
      onChange={handleChange}
    />
  );
};

export default DateTimePickerComponent;

两种方法都能完美实现你的需求，个人更推荐第一种柯里化的方式，因为它让子组件的职责更单一——子组件不需要知道dateTimePickerId的存在，只需要调用传入的处理函数即可，完全贴合你「父组件处理所有Props，子组件仅负责展示」的设计思路。

内容的提问来源于stack exchange，提问作者user2128702