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添加到表单中，然后也应该提交，对吧？

如果是这样，那么你需要在组件中多考虑一下。有一个处理表单的组件。周围有一个处理添加其他形式的。

groups

要完成多个<ReportDialog> <ReportForm> <ReportForm> <button onClick={this.addReport}>Add another</button> </ReportDialog>，您需要考虑组件中的数据，这些是报告（我假设）。因此，您需要ReportForms中的状态来跟踪您的报告。所以在应用程序开始时你有一个报告：

ReportDialog

因此，在getInitialState: function () { return { reports: [{ title: '', body: '', date: new Date() }] }; }中，您需要更改状态并添加其他报告。要渲染这些报告，您已使用addReport，但这次需要循环播放组件中的报告，并为每个报告返回map。

在ReactJs中添加多个div或渲染

1 个答案: