如何在reactjs

Question

我有一个 grandparent 组件，它通过映射数组来呈现卡父组件。这些父卡的格式为 children 。处理表单提交功能的调用是在祖父母中。我怎么知道表格来自哪个家长？

我多次阅读此SO explainer about the difference between props and state，我认为我可能需要以状态而不是道具，但当我在console.log(this.state)函数中handleSubmit时，它是空的。

在我惯用的例子中，我有一套猴子和一套纸杯蛋糕。蛋糕包括对猴子的参考（存储在mongodb和我的州），因此每个蛋糕属于一只猴子。为了制作一个新的蛋糕，我需要知道它配的是哪只猴子。

我尝试过几件事情，包括将猴子传递给表格，在猴子身上添加一个隐藏的场地（这似乎很开始并且不起作用）。当我在console.log(this.props)种子格式中render()时，它会显示monkey是道具的一部分。但是，猴子不会通过this.props传递{handleSubmit}。我根本就不明白。

monkeys.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上，这个问题的分支叫做 connectcuptomonkeys ，应该是right here

Answer 1

选项1：当您致电handleSubmit时，将猴子发送给父母：

    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>
            ))}
   }