Question

另一天另一个麻烦。我有两个集合：让我们说Items和Reviews，项目由管理员创建，任何人都可以留下评论（无需登录）。我在提交评论表单时遇到问题。我会尽量保持以下代码尽可能清楚地解释它现在如何工作以及它如何工作。让我们开始吧。首先，我有一个单独项目的组件，其中一个人可以写一个评论（每个项目都有一个表格）：

import React, {Component, PropTypes} from 'react';
import ReviewForm from './ReviewForm.jsx';

import {Items} from '../../api/collections/items.js';
import {Reviews} from '../../api/collections/reviews.js';


export default class Item extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <p>{this.props.item.itemName}</p>
                </div>
            <div className="row"
                    <p>{this.props.item.itemDesc}</p>
        </div>
            </div>
            <div className="row">
                <form onSubmit={this.props.leaveData}>
                    <div className="row">
                        <div className="input-field col s6">
                             <input placeholder="Name" id="review_body" type="text" />
                        </div>
                    </div>
                        <button type="submit">Send Review</button>
                    </div>
                </form>
             </div>
        )
    }
}

Item.propTypes = {
    item PropTypes.object.isRequired,
    leaveData: PropTypes.func.isRequired,
};

你可以看到没什么特别的（项目的proptypes工作完美），我有一个leaveData函数，用于在ItemsList组件中访问此组件：导入React，{Component，PropTypes}来自＆＃39; react＆＃39 ;; 从meteor / react-meteor-data＆＃39;中导入{createContainer}; 从＆＃39; ./ Item.jsx＆＃39;中导入项目; 从＆＃39; ../../ api / collections / items.js＆＃39;中导入{Items}; 从＆＃39; ../../ api / collections / reviews.js＆＃39;;

导入{评论}

class ItemssList extends Component {
    handleSubmit(event) {
        event.preventDefault();

        const reviewBody = $('#review_body').val();

        Reviews.insert({
            reviewBody, 
            createdAt: new Date(),
        });
    }
    renderItems() {
        return this.props.items.map((item) => (
            <Item key={item._id} item={item} leaveData={this.handleSubmit} />
        ));
    }
    render() {
        return (
            <div className="row">
                {this.renderItems()}
            </div>
        )
    }
}

ItemsList.propTypes = {
    items: PropTypes.array.isRequired,
}

export default createContainer(() => {
    return {
        items: Items.find({}).fetch(),
    };
}, ItemsList);

所以代码非常简单，我使用几乎相同的代码在管理页面上创建一个新项目，唯一的区别是管理页面只有一个表单，但我希望每个项目对象都有一个审阅表单。可能是我搞砸了ID，但不确定。现在它工作正常，但只有当我提交第一个项目的评论时，对于其他项目，此表单提交一个空文档，我只是不知道这种行为可能是什么原因。希望听到任何建议，帮助我一见钟情地完成这个琐碎的任务！

`

Answer 1

问题在于，当您有多个项目时，所有项目都会创建一个具有相同“review_body”id的DOM元素。你应该做两件事来解决这个问题：

<强> 1。您应该使用React id来代替DOM ref。

<input placeholder="Name" ref="review_body" type="text" />

ref是组件的本地，如果有多个DOM节点具有相同的ref值，则不会有问题。

<强> 2。将<input>值作为参数传递给父组件

class Item extends Component {
  handleSubmit(event) {
    event.preventDefault();
    let review = ReactDOM.findDOMNode(this.refs['review_body']).value;
    this.props.leaveData(review);
  }  
  ...
}

另外，请确保您正在调用此功能。

<form onSubmit={this.handleSubmit.bind(this)}>

现在，您的ItemssList.handleSubmit函数会将input字段的值作为参数（而不是event）。

您需要ReactDOM。

使用React在Meteor中提交表单

1 个答案: