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

正如您所看到的，没有什么特别之处（虽然项目的 proptypes 工作完美），我有一个 leaveData 函数，我用它来访问 ItemsList 组件中的这个组件：从 'react' 导入 React，{ Component，PropTypes}；从 'meteor/react-meteor-data' 导入 { createContainer }；从 './Item.jsx' 导入项目；从 '../../api/collections/items.js' 导入 {Items}；从 '../../api/collections/reviews.js';

导入 {Reviews}

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.而不是 DOM id's，你应该使用 React ref's.

<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 中提交表单

Form submitting in Meteor with React

meteor

reactjs