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