在ReactJs中添加多個div或者渲染

Question

我想要創建在某個類中呈現的同一個html的倍數時遇到問題。例如，我有一個div可能是這樣的

是[標題放在這裏，是一個輸入字段] [下拉] [文本區域]

[提交]

[添加其他字段]

在添加另一個字段時，我想克隆此視圖並能夠再次添加更多。

這是我到目前爲止有：

var UpdateForm = React.createClass({ 

    handleSubmit : function(e) { 
     e.preventDefault(); 
    var title = React.findDOMNode(this.refs.title).value.trim(); 
    var date = React.findDOMNode(this.refs.date).value.trim(); 
    var body = React.findDOMNode(this.refs.body).value.trim(); 



    if(!title||!date || !body) { 
     return; 
    } 

    this.props.onSubmit({title:title, date : date, body : body}); 

     React.findDOMNode(this.refs.title).value = ''; 
     React.findDOMNode(this.refs.date).value = ''; 
     React.findDOMNode(this.refs.body).value = ''; 
     //React.findDOMNode(this.refs.sub).value = ''; 

    }, 

    render: function() { 

    return(
    <div id = "This is what I want to duplicate on each button click"> 
     <form className="form-horizontal" onSubmit={this.handleSubmit}> 
     <div class="form-control"> 
     <label className="col-sm-0 control-label ">Title:</label> 
     <div class="col-sm-5"> 
     <input className = "form-control" type = "text" placeholder="Title...." ref = "title"/> 
     </div> 
     </div> 
     <div class="form-control"> 
     <label className="col-sm-0 control-label ">Date:</label> 
     <div class="col-sm-5"> 
     <input className = "form-control" type = "text" placeholder="Date...." ref = "date"/> 
     </div> 
     </div> 
     <div className="form"> 
     <label htmlFor="body" className="col-sm-0 control-label">Report Body:</label> 
     <div className="column"> 
     <textarea className = "ckeditor" id = "ckedit" ref = "body"></textarea> 

     </div> 
     </div> 



     <div class="form-group"> 
     <label className="col-sm-0 control-label"></label> 
     <div class="col-sm-5"> 
     <input type = "submit" value="Save Changes" className = "btn btn-primary" /> 
     </div> 
     </div> 
     </form> 

    <div className="btn-group"> 
    <button type="button" className="btn btn-danger">Assign to</button> 
    <button type="button" className="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
     <span className="caret"></span> 
     <span className="sr-only">Toggle Dropdown</span> 
    </button> 
    <ul className="dropdown-menu"> 
    { 
     this.props.forms.map(function(form){ 

    return (
    <li><a href ="#">{form}</a></li> 


)})} 
    </ul> 
    <button className="btn btn-success btn-block" onClick={this.addInputField}>Add Subform</button> 
    </div> 
     </div> 
); 
} 
}); 

我想我需要添加：

addDiv: function(e) { 
     e.preventDefault(); 
     //have a array of divs? 
     //push a the same div into it? 
     //then set state of that array? 

    } 

我知道的jQuery我可以只寫追加這個標記，每當我打了一個功能一個按鈕，但我不知道如何在這裏思考。

Answer 1

我認爲你想要的是有一個按鈕，將另一個header-date-body-Component添加到窗體中，然後應該提交，對嗎？

如果是這樣，那麼你需要考慮更多的組件。有一個處理表單的組件。有一個附件可以處理添加其他表單。

<ReportDialog> 
    <ReportForm> 
    <ReportForm> 
    <button onClick={this.addReport}>Add another</button> 
</ReportDialog> 

爲了實現多ReportForms你需要考慮你的組件中的數據，這是報告（我假設）。所以你需要一個國家ReportDialog跟蹤你的報告。所以在應用的開始，你有一個報告：

getInitialState: function() { 
    return { 
    reports: [{ title: '', body: '', date: new Date() }] 
    }; 
} 

所以在addReport然後需要改變狀態，並添加另一份報告。爲了讓這些報告已經使用了map，但是這次您需要遍歷組件中的報告併爲每個報告返回ReportForm。