在 ReactJs 中添加多个 div 或渲染

Question

我在想要创建我在某个 class 中渲染的相同 html 的倍数时遇到了麻烦。例如，我有一个 div 可能看起来像这样

[Header 在这里，是一个输入字段] [下拉] [文本区域]

[提交]

[添加另一个字段]

关于添加另一个字段，我想克隆此视图并能够再次添加同样多的字段。

这是我目前的情况：

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，但这次您需要遍历组件中的报告，并为每个报告 return 一个 ReportForm。

在 ReactJs 中添加多个 div 或渲染

Adding multiple divs or renders in ReactJs

javascript

web-applications

reactjs

react-jsx