Question

总体目标是根据输入来调用配方。

我试图从我作为道具传递给孩子的孩子的父母那里调用search（）。但是我收到错误消息-TypeError：this.props.search不是函数

任何人都可以看到我错了吗：//我已经处理了绑定并把道具传递给了：/

父代码

import React, { Component } from 'react';
import RecipeDisplay from '../RecipeDisplay/RecipeDisplay';
import Form from '../Form/Form';
import './RecipeUI.css';

export default class RecipeUI extends Component {
    constructor(props) {
        super(props);
        this.state = {
            RecipeUI: [
                {
                    heading: 'heading!',
                    img:
                        'https://d2qpatdq99d39w.cloudfront.net/wp-content/uploads/2019/05/08152013/food-addiction-2.jpg',
                    ingridients: 'ingridients',
                    link:
                        'https://d2qpatdq99d39w.cloudfront.net/wp-content/uploads/2019/05/08152013/food-addiction-2.jpg'
                }
            ]
        };
        this.search = this.search.bind(this);
    }

    search() {
        alert('oi');
    }
    render() {
        return (
            <div className="RecipeUI">
                <div className="RecipeUI-header">
                    <h1>Welcome to the Recipe Fetcher</h1>
                    <Form />
                </div>
                <div className="RecipeUI-RecipeDisplay">
                    {this.state.RecipeUI.map((recipe) => (
                        <RecipeDisplay
                            heading={recipe.heading}
                            img={recipe.img}
                            ingridients={recipe.ingridients}
                            link={recipe.link}
                            search={this.search}
                        />
                    ))}
                </div>
            </div>
        );
    }
}

孩子的代码

import React, { Component } from 'react';

export default class Form extends Component {
    constructor(props) {
        super(props);
        this.state = { recipeinput: '' };
        this.handleInput = this.handleInput.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
    }

    handleInput(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    handleSearch(e) {
        e.preventDefault();
        this.props.search();
    }
    render() {
        return (
            <div>
                <form>
                    <label htmlFor="recipeinput">What are you in the mood for today?</label>
                    <input
                        id="recipeinput"
                        name="recipeinput"
                        value={this.state.recipeinput}
                        onChange={this.handleInput}
                    />
                </form>
                <button onClick={this.handleSearch}>Search</button>
            </div>
        );
    }
}

Answer 1

您的表单组件未收到任何道具。相反，您已经将this.search传递到RecipeDisplay组件中。

render() {
        return (
            <div className="RecipeUI">
                <div className="RecipeUI-header">
                    <h1>Welcome to the Recipe Fetcher</h1>
                    <Form search={this.search} />
                </div>
                <div className="RecipeUI-RecipeDisplay">
                    {this.state.RecipeUI.map((recipe) => (
                        <RecipeDisplay
                            heading={recipe.heading}
                            img={recipe.img}
                            ingridients={recipe.ingridients}
                            link={recipe.link}

                        />
                    ))}
                </div>
            </div>
        );
    }

在反应中从孩子的父母中调用函数时遇到麻烦

1 个答案: