リアクトで流星に投稿するフォーム

Question

別の日に別のトラブル。私は2つのコレクションを持っています：ItemsとReviewsと言うと、アイテムは管理者によって作成され、誰もが（ログインせずに）レビューを残すことができます。私はレビューのために提出するフォームに問題があります。以下のコードをできるだけ明確にして、現在どのように動作し、どのように動作するかを説明します。始めましょう。あなたはアイテムの仕事のために何も非常に特別な（proptypesを見ることができるように

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関数を持っています。コンポーネント： import React、{Component、PropTypes} from 'react'; 「meteor/react-meteor-data」から{createContainer}をインポートします。 './Item.jsx'からアイテムをインポートします。 import {Items} from '../../api/collections/items.js'; '../../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さん、あなたが使用する必要がありますrefに反応 'は：あなたはこの問題を解決するためにやるべき二つのものがあります。

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

ref年代はコンポーネントに対してローカルであり、かつ同じref値を持つ複数のDOMノードがあるかどうかは問題ではありません。親コンポーネント

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

のパラメータとして

2.パス<input>値また、この関数を呼び出していることを確認してください。

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

今すぐあなたのItemssList.handleSubmit機能は、（代わりにeventの）パラメータとしてinputフィールドの値を取得します。

これにはReactDOMが必要です。