javascript - this.props 没有传递函数

Question

在我的反应本机文件中，我试图将一个函数传递给我的子组件，static navigationOptions但它一直说undefined is not a function(evaluating'_this.props.onUpdate(e.target.value)')我试图将文本输入中的值传递给父组件，但它带来了上面的错误，请问是什么我做错了，

class Child 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}/>

    );
}
}

父组件

export default class Parent extends React.Component {
Update = (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, navigationOptions}) => {
    const {params} = navigation.state;
    return {
         headerTitle: <Child onUpdate={this.Update}/>,
    };
};
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})
        });
    });
}

标签： javascriptreactjsreact-nativereact-navigation

Answer 1

方法static无权访问实例的this，因此当您这样做时：

static navigationOptions = ({navigation, navigationOptions}) => {
   const {params} = navigation.state;
    return {
         headerTitle: <Child onUpdate={this.Update}/>,
    };
};

this.Update是undefined。_ 所以当你这样做时this.props.onUpdate(e.target.value);

它正在调用undefined(e.target.value)，而undefined不是函数。