使用 React 在 Meteor 中提交表单

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,
};

正如您所见，没有什么特别的（尽管项目的属性类型很完美），我有一个 leaveData 函数，我用它来访问 ItemsList 组件中的这个组件： 从'react'导入反应，{组件，PropTypes}； 从 'meteor/react-meteor-data' 导入 { createContainer }； 从'./Item.jsx'导入项目； 从'../../api/collections/items.js'导入{Items}； 从'../../api/collections/reviews.js'导入{评论}；

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 ref，而不是 DOM id。

<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。