正确的为什么要将带有参数的函数绑定到React Native中的子组件

Question

I am still new to React Native and I struggle a bit with the programming paradigm. What I am trying to do (by following the structure of another React.js project) is to create a container (parent component) which contains a number of other components. My ultimate goal is to pass and handle all of the props in the parent component. Child component only shows them. My structure looks something like this:

export default class TemporaryCardRequestScreen extends React.Component {
    constructor(props) {
        super(props);
        this.showDateTimePicker = this.showDateTimePicker.bind(this);
        this.hideDateTimePicker = this.hideDateTimePicker.bind(this);
        this.handleDatePicked = this.handleDatePicked.bind(this);

        this.state.fromDateTime = {
            isVisible: false,
            value: new Date()
        }
    }

    showDateTimePicker = () => { /*body*/ };

    hideDateTimePicker = () => { /*body*/ };

    handleDatePicked = date => { /*body*/ };

    render() {
        return (
            <DateTimePickerComponent 
                isVisible={this.state.fromDateTime.isVisible}
                onConfirmPressed={this.handleDatePicked}
                onCancelPressed={this.hideDateTimePicker}
                showDateTimePicker={this.showDateTimePicker}
                value={this.state.fromDateTime.value}
            />
        );
    }
}

and the, my child component looks something like this:

// npm ref.: https://github.com/mmazzarolo/react-native-modal-datetime-picker
export default class DateTimePickerComponent extends Component {
    constructor(props) {
      super(props);
    }

    render() {
        const {  
            isVisible,
            onConfirmPressed,
            onCancelPressed,
            showDateTimePicker } = this.props;

        return (
            <>
            <Button title="Show DatePicker" onPress={showDateTimePicker} />
            <DateTimePicker
                isVisible={isVisible}
                onConfirm={onConfirmPressed}
                onCancel={onCancelPressed}
                mode='datetime'
                is24Hour={false}
                date={new Date()}
            />
        </>
      );
    }
  }

My focus now is on

onConfirmPressed={this.handleDatePicked}

currently, this.handleDatePicked accepts a single argument but I'd like it to accept one additional which is passed to it at the place being used in child component.

So, my ultimate goal would be to have something similar to this:

render() {
        const {  
            isVisible,
            onConfirmPressed,
            onCancelPressed,
            showDateTimePicker,
            dateTimePickerId } = this.props;

        return (
            <>
            <Button title="Show DatePicker" onPress={this.showDateTimePicker} />
            <DateTimePicker
                isVisible={isVisible}
                onConfirm={onConfirmPressed(dateTimePickerId)}
                onCancel={onCancelPressed}
                mode='datetime'
                is24Hour={false}
                date={new Date()}
            />
        </>
      );
    }

So, in this way, in my parent component I could have a single method which can handle the updates for a number of date time pickers in my container (This is actually my use-case). Instead of having the same type of handlers (with different property name) for pretty much the same thing.

UPDATE: Snack expo

Answer 1

You can capture 'onConfirm' of DateTimePickerComponent, then call parent function and pass in the dateTimePickerId.

TemporaryCardRequestScreen

// Modify to accept 2 arguments
handleDatePicked = (id, date) => { 
    if (id == "1") {
        // code here
    }
    else if (id == "2") {
        // code here
    } 
};
render() {
    return (
        <div>
            <DateTimePickerComponent 
                isVisible={this.state.fromDateTime.isVisible}
                onConfirmPressed={this.handleDatePicked}
                onCancelPressed={this.hideDateTimePicker}
                showDateTimePicker={this.showDateTimePicker}
                value={this.state.fromDateTime.value}
                dateTimePickerId="1"
            />
            <DateTimePickerComponent 
                isVisible={this.state.fromDateTime.isVisible}
                onConfirmPressed={this.handleDatePicked}
                onCancelPressed={this.hideDateTimePicker}
                showDateTimePicker={this.showDateTimePicker}
                value={this.state.fromDateTime.value}
                dateTimePickerId="2}
            />
        </div>

        );
    }

DateTimePickerComponent

onMyCustomConfirmPressed = (date) => {
    // Parent onConfirmPressed() shall accept 2 arguments
    this.props.onConfirmPressed(this.props.dateTimePickerId, date)
}

render() {
    const {  
        isVisible,
        onConfirmPressed,
        onCancelPressed,
        showDateTimePicker,
        dateTimePickerId } = this.props;

    return (
        <>
        <Button title="Show DatePicker" onPress={this.showDateTimePicker} />
        <DateTimePicker
            isVisible={isVisible}
            onConfirm={this.onMyCustomConfirmPressed}
            onCancel={onCancelPressed}
            mode='datetime'
            is24Hour={false}
            date={new Date()}
        />
        </>
    );
}