Question

我还是React Native的新手，我在编程范例上有些挣扎。我试图做的（通过遵循另一个React.js项目的结构）是创建一个包含许多其他组件的容器（父组件）。我的最终目标是传递和处理父组件中的所有道具。子组件仅显示它们。我的结构看起来像这样：

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}
            />
        );
    }
}

，我的子组件看起来像这样：

// 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()}
            />
        </>
      );
    }
  }

我现在的重点是

onConfirmPressed={this.handleDatePicked}

当前， this.handleDatePicked 接受一个参数，但我希望它接受一个附加参数，该参数将在子组件中使用的位置传递给它。

所以，我的最终目标是要拥有类似的东西：

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()}
            />
        </>
      );
    }

因此，以这种方式，在我的父组件中，我可以使用一个方法来处理容器中多个日期时间选择器的更新（这实际上是我的用例）。不必使用相同类型的处理程序（具有不同的属性名称）来处理几乎相同的事情。

更新：Snack expo

Answer 1

您可以捕获DateTimePickerComponent的“ onConfirm”，然后调用父函数并传递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()}
        />
        </>
    );
}

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

1 个答案: