想要创建组件的新实例

Question

我想要的是我想要创建一个新广告，该广告应该具有用户输入的标题和desc但是当我运行下面的代码时创建和[object Object]，为什么它显示对象而不是广告请解释

var ValidatePost = React.createClass({
    CheckingPost: function() {
       var product_title = document.forms["post"]["pro_title"].value;
        var product_desc = document.forms["post"]["pro_desc"].value;
         var clearForm = document.forms["post"];
           var returnAd = <Newad title={product_title} desc={Product_desc} />  
            var newproduct = document.getElementById("newproduct");
              newproduct.innerHTML += returnAd;
                clearForm.reset();
             },
        render: function(){
        return(
          <div>
            <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" className="btn btn-primary btn-md" id="post-ads" onClick={this.CheckingPost} data-dismiss="modal"><span className="glyphicon glyphicon-pencil"></span>  Post Add            
            </button>
          </div>
      );
    }
});



  function Ads(product) {
        return(
           <div className = "col-sm-6 col-md-4">
            <div className = "thumbnail">
            <img src={product.image} alt="product-image"/>
            </div>
            <div className = "caption">
            <div className="border">
               <h3>{product.title}</h3>
               <p>{product.desc}</p> 
                  <button className = "btn btn-primary" role = "button" data-toggle="modal" data-target="#view-detail">View Details
                  </button>  
                  </div>
                  </div>
                  </div>
                  );
              }


     function Newad(product) {
        return (
            <div className="row" id="newproduct">
            <Ads title="Forza" desc="rndom text rndom text rndom text rndom text" image="img/img2.jpg" />
            <Ads title="PlayStation 4" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img1.jpg"  />
            <Ads title="Xbox one" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img3.png"  />
            <Ads title="MacBook" desc="Lorem ipsum jipsum Lorem ipsum jipsum" image="img/img4.jpg"  />
            </div>
          );
    }   

 function PostModal() {
return (
    <form id="post-form" method="POST" name="post">
      <div className="modal fade" id="addPostModal" role="dialog">
        <div className="modal-dialog" role="document">
          <div className="modal-content" >
            <div className="modal-header" >
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h3 className="modal-title" id="exampleModalLabel">Post Your Add</h3>

            </div>
            <div className="modal-body">
               <span id="errorPlace" >

              </span>               
                <div className="form-group">
                  <label htmlFor="product-title" className="control-label">Title:</label>
                <input type="text" placeholder="My Book" className="form-control field-validate" id="product-title" name="pro_title"/>
              </div>
              <div className="form-group">
                <label htmlFor="product-desc" className="control-label">Description:</label>
                <textarea className="form-control field-validate" placeholder="Description here . . ." id="product-desc" name="pro_desc"></textarea>
              </div>
              <div className="form-group">
                <label htmlFor="seller-name" className="control-label">
                  Seller Name: 
                  <i data-toggle="tooltip" title="This can be your or seller name." data-placement="right" className="glyphicon glyphicon-question-sign"></i>
                </label>
                <input type="text" placeholder="Osama" className="form-control field-validate" id="seller-name" name="sel_name"/>
              </div>
              <div className="form-group">
                <label htmlFor="seller-email" className="control-label">
                  Seller Email:
                  <i data-toggle="tooltip" title="This can be your or seller email through which the buyer can contact you" data-placement="right" className="glyphicon glyphicon-question-sign"></i>
                </label>
                <input type="email" placeholder="someone@somedomain.com" className="form-control field-validate" id="seller-email" name="sel_email"/>
              </div>
              <div className="form-group">
                <label htmlFor="seller-number" className="control-label">
                  Seller Contact No:
                  <i data-toggle="tooltip" title="This can be your or seller number through which the buyer can contact you" data-placement="right" className="glyphicon glyphicon-question-sign"></i>
                </label>
                <input type="number" placeholder="+92" className="form-control field-validate" id="seller-number" name="sel_no"/>
              </div>
                <div className="form-group">
                  <label htmlFor="price" className="control-label">
                    Price:
                    <i className="glyphicon glyphicon-question-sign"></i>
                  </label>
                  <input size="2" type="number" placeholder="66.00" className="form-control field-validate" id="price" name="price"/>
                </div>
              <div className="form-group">
                <label htmlFor="seller-email" className="control-label">
                  Product Image:
                  <i data-toggle="tooltip" title="Upload picture of your product" data-placement="right" className="glyphicon glyphicon-question-sign"></i>
                </label>
                <input type="file" onchange="imgUpload(event, this)" id="product-image" />
                <div className="img-wrap-up">
                  <img id="img-view" src="" />
                </div>
              </div> 
            <div id="error-place"></div>
          </div>
          <div className="modal-footer">
            <ValidatePost />
          </div>
        </div>
      </div>
    </div> 
  </form>

）;

}