Question

试图传递一个函数作为道具：

import {
...
} from "react-native";

import {
...
} from "../actions/events";

import { isLoading, isLoadingCredentials, hasErrored } from "../actions/loader";

class HomeScreen extends React.PureComponent {
    static navigationOptions = {
        title: "",
        headerMode: "screen",
        header: null
    };

    constructor(props) {
        super(props);


    }

    componentWillMount() {
        const {
            navigation: { navigate },
            setCredentials
        } = this.props;
    }

    onSubmit(e) {
        ...
    }

    render() {
        const {
            ...
        } = this.props;

        if (!authenticated) {
            return <Login onPress={this.onAuthenticate} />;
        }

        return (

                <View
                    style={styles.container}
                    onLayout={this.onLayout.bind(this)}
                >

                    <Pickers
                        onSubmit={this.onSubmit}
                    />
                </View>

        );
    }
}

const mapStateToProps = state => {
    return {
        categories: state.fetchCategories,
        isLoading: state.isLoading,
        hasErrored: state.hasErrored,
        credentials: state.setCredentials,
        isLoadingCredentials: state.isLoadingCredentials,
        authenticated: state.authenticated
    };
};

const mapDispatchToProps = {
  ....
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(HomeScreen);

孩子：

  import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Picker from "./common/Picker";
import {
..
} from "react-native";

import {
...
} from "../actions/events";

export class Pickers extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const {
      credentials: { year, group, student, showStudent }
    } = this.props;

    return (
      <View>
          <TouchableHighlight
            onClick={() => this.props.onSubmit()}
          >
            <Text style={styles.buttonText}> Submit</Text>
          </TouchableHighlight>

      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    credentials: state.setCredentials
  };
};

const mapDispatchToProps = {
...
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Pickers);

我在做什么错了？

Answer 1

将其更改为：

render() {
    const { onSubmit } = this.props;
    return <TouchableHighlight
           onClick={this.props.onSubmit} 
            />
}

您的onSubmit方法是从不在类上的Props传递的。因此它是未定义的。因此，您需要在提交时致电this.props.onSubmit。它将调用从您的父组件作为prop传递的函数。

是的，现在您应该切换到ES6语法。

class HomeScreen extends React.PureComponent {
    static navigationOptions = {
        title: "",
        headerMode: "screen",
        header: null
    };

    constructor(props) {
        super(props);
    }

    onSubmit= (e) => {
    ...

    }

    render(){
     <Pickers onSubmit={this.onSubmit}/>}

无法读取未定义的

1 个答案: