如何在reactjs中从孙辈那里获得父母道具/状态

Question

我有一个祖父母组件，它通过在数组上映射来呈现卡片父组件。那些家长卡上有孩子。处理表单提交功能的调用在祖父母中。我怎么知道表格来自哪位家长？

我读了好几次这篇文章来解释道具和状态之间的区别，我认为我可能需要进入状态而不是道具，但是当我控制台时。log（this.state）在handleSubmit函数中，它是空的。

在我做作的例子中，我有一套猴子和一套纸杯蛋糕。纸杯蛋糕包含对猴子的引用（存储在mongodb和my state中），因此每个纸杯蛋糕都属于一只猴子。为了制作一个新的纸杯蛋糕，我需要知道它和哪只猴子搭配。

我已经尝试了几件事情，包括在表单中传递猴子，用猴子添加一个隐藏字段（一开始看起来很黑客，但没有成功）。当我console.log（this.props）在子窗体渲染（）方法中时，它显示猴子是道具的一部分。但是，通过{handleSubmit}传递的this.props中没有猴子。我根本不明白。

猴子。js-祖父母（猴子卡片是父母）我真正想要的是handleCupcakeSubmit包含关于猴子的信息，这样我就可以为那只猴子创建一个新的纸杯蛋糕。

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import MonkeysCupcakes from './monkeyscupcakes';
import AddCupcakeForm from './add_cupcake_form';

export default class Monkeys extends Component {
    constructor(props) {
        super(props);
        this.handleCupcakeSubmit = this.handleCupcakeSubmit.bind(this);
    }

    handleCupcakeSubmit({monkey, color }) {
        console.log("trying to submit a cupcake")
        console.log(this.state)
        console.log('handleSubmitCupcake with', monkey, color);
        // const userid = this.props.monkey.user;
        // const mid = this.props.monkey._id;
        // Eventually, I want to be able to have the userid and monkeyid - both of which are in the monkey props 
        //this.props.createCupcake({ userid, mid, color });
    }

    renderMonkeyCupcakes(mid) {
        if (
            this.props.cupcakes !== undefined &&
            this.props.cupcakes.length > 0
        ) {
            console.log("Monkeys is trying to render it's cupcakes");
            const mc = this.props.cupcakes.filter(
                cupcake => cupcake.monkeyid === mid
            );
            return <MonkeysCupcakes cupcakes={mc} />;
        } else {
            console.log('Monkeys has no cupcakes');
        }
    }
    render() {
        return (
            <div>
                {this.props.monkeys.map((monkey, i) => (
                    <div key={i} className="card blue-grey darken-1">
                        <div className="card-content white-text">
                            <span className="card-title">{monkey.name}</span>
                            <p>I am a monkey card</p>
                            <AddCupcakeForm monkey={monkey}
                                onSubmit={this.handleCupcakeSubmit}
                            />
                        </div>
                        {this.renderMonkeyCupcakes(monkey._id)}
                    </div>
                ))}
            </div>
        );
    }
}
Monkeys.propTypes = {
    monkeys: PropTypes.array,
    cupcakes: PropTypes.array
};

add_cupcake_form.js孩子

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';

import renderTextField from '../helpers/textfield';
import { createCupcake } from '../../actions';

class AddCupcakeForm extends Component {


    render() {
        const { handleSubmit } = this.props; // no monkey
        console.log("add cupcake form props", this.props); // this.props.monkey exists
        return (
            <div className="section">
                <form onSubmit={handleSubmit}>
                    <Field
                        label="Color"
                        name="color"
                        placeholder="Purple"
                        component={renderTextField}
                        type="text"
                    />


                    <button className="btn-large" type="submit">
                        Add Cupcake
                        <i className="material-icons right">done</i>
                    </button>
                </form>
            </div>
        );
    }
}

const validate = values => {
    const errors = {};

    if (!values.color) {
        errors.color = 'Please enter cupcake color';
    }

    return errors;
};

export default reduxForm({
    form: 'addcupcake',
    validate
})(connect(null, { createCupcake })(AddCupcakeForm));

我的项目是在github上，有这个问题的分支叫做连接器，应该在这里

Answer 1

选项1：调用句柄时将猴子发送给父句柄Submit：

    render() {
    const handleSubmit = () => this.props.handleSubmit({
      monkey: this.props.monkey
    });
    return (
        <div className="section">
            <form onSubmit={handleSubmit}>

选项2：在通过handleCupcakeSubmit时使用闭包：

 {this.props.monkeys.map((monkey, i) => {
    let handler = () => this.handleCupcakeSubmit({monkey})

    return (
                <div key={i} className="card blue-grey darken-1">
                    <div className="card-content white-text">
                        <span className="card-title">{monkey.name}</span>
                        <p>I am a monkey card</p>
                        <AddCupcakeForm monkey={monkey}
                            onSubmit={handler}
                        />
                    </div>
                    {this.renderMonkeyCupcakes(monkey._id)}
                </div>
            ))}
   }