函数未传递给子组件

时间:2018-07-27 04:02:58

标签: javascript reactjs react-native react-navigation

我是React Native的学习者,任何帮助都将发挥很大的作用:),我开始为我的应用程序使用react-navigation,我有一个子组件作为父组件的头,该子组件包含一个{ {1}}我想在子组件的TextInput更改时更新父组件,通常会传递一个函数,因为props的值会起作用,但是由于我正在使用<TextInput/>来访问子组件,因此将无法正常工作,我必须设置navigation.params.state,已完成此操作,已阅读文档,并通过此链接https://github.com/react-navigation/react-navigation/issues/147查看,但始终会返回此错误static navigationOptions 请如何进行这项工作,并将功能成功传递给undefined is not an object(evaluating 'params.update')组件

BOX组件

Box

家庭组件

class Box extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        search: ""
    }
}

handleChange = (e) => {
    this.props.onUpdate(e.target.value);
    this.setState({search: e.target.value});
}

render() {
    return (
        <TextInput placeholder="Search for your herbs by name,type..." value={this.state.search}
                   onChange={this.handleChange}
                   underlineColorAndroid={'transparent'}
                   style={BackStyles.textBox}/> ); }}

APP.js(主要组件)

 export default class Home extends React.Component {
onUpdate = (val) => {
    this.setState({
        search: val
    });
    let db = SQLite.openDatabase({
        name: 'test.db',
        createFromLocation: "~Herbo.db",
        location: 'Library'
    }, this.openCB, this.errorCB);
    db.transaction((tx) => {
        tx.executeSql("SELECT * FROM data where name like '" + this.state.search + "' ", [], (tx, results) => {
            console.log("Query completed");
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
                let row = results.rows.item(i);
                this.setState(prevState => ({
                    record: [...prevState.record, row],
                    pressed: [...prevState.pressed, false]
                }));
                console.log(`Record: ${row.name}`);
                //this.sleep(2);
                //this.setState({record: row});
            }
            this.setState({loader: false})
        });
    });
};
static navigationOptions = ({navigation}) => {
    const {params} = navigation.state.params || {};
    return {
        headerTitle: <Box onUpdate={params.update}/>,
    };
    //   header:  null
};

componentDidMount() {
    this.navigation.setParams({
        update: this.props.onUpdate()
    })
}

constructor(props) {
    super(props);
    this.state = {
        record: [],
        header: null,
        loader: true,
        pressed: {},
        ar: [],
        search: ''
    };

    let db = SQLite.openDatabase({
        name: 'test.db',
        createFromLocation: "~Herbo.db",
        location: 'Library'
    }, this.openCB, this.errorCB);
    db.transaction((tx) => {
        tx.executeSql('SELECT * FROM data', [], (tx, results) => {
            console.log("Query completed");
            var len = results.rows.length;
            for (let i = 0; i < len; i++) {
                let row = results.rows.item(i);
                this.setState(prevState => ({
                    record: [...prevState.record, row],
                    pressed: [...prevState.pressed, false]
                }));
                console.log(`Record: ${row.name}`);
                //this.sleep(2);
                //this.setState({record: row});
            }
            this.setState({loader: false})
        });
    });
}

handlePressedIn = (i, value) => {

    if (this.state.ar.length > 0) {
        this.state.ar.map((value) => {
            this.setState(prevState => {
                const pressed = {...prevState.pressed};
                pressed[value] = false;
                return {pressed};
            })
        });
    }
    this.setState(prevState => {
        if (!this.state.ar.includes(i)) {
            this.setState(prevState => ({
                ar: [...prevState.ar, i]
            }));
        }
        const pressed = {...prevState.pressed};
        pressed[i] = !pressed[i];
        return {pressed};
    });
    this.props.navigation.navigate('Details', {
        itemId: i + 1,
        otherParam: value
    });
};

errorCB(err) {
    console.log("SQL Error: " + err);
}

successCB() {
    console.log("SQL executed fine");
}

openCB() {
    console.log("Database OPENED");
}

render() {
    const herbs = this.state.record.map((herb) =>
        <TouchableNativeFeedback onPress={() => this.handlePressedIn(herb.id - 1, herb.name)} key={herb.id}>
            <View style={this.state.pressed[herb.id - 1] ? BackStyles.herbBox : BackStyles.herb_box}>
                <Image style={BackStyles.image} source={{uri: `${herb.name.replace(/ /g, '')}`}}/>
                <View style={{flexDirection: 'column',}}><Text
                    style={this.state.pressed[herb.id - 1] ? BackStyles.header2 : BackStyles.header}>{herb.name}</Text>
                    <Text
                        style={this.state.pressed[herb.id - 1] ? BackStyles.sub2 : BackStyles.sub}>{herb.bot}</Text></View>
            </View></TouchableNativeFeedback>
    );
    const view = <ScrollView overScrollMode={'never'}>{herbs}</ScrollView>;
    return (
        <View style={BackStyles.main}>
            <View style={{flex: 1}}>
                {
                    this.state.loader ?
                        <ActivityIndicator animating={this.state.loader} color='#28B564' size="large"
                                           style={BackStyles.activityIndicator}/> : <View>{view}</View>
} </View></View> ); }}

0 个答案:

没有答案