Reactjs отправка нескольких форм

Question

В моем случае я хотел бы подать несколько форм в ReactionJS. Но я понятия не имею, как получить множественную форму в Parent Component и отправить.

вот мой код:

class BulkEditor extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
            customCompanies: []
        };

        this.forms = [];

        this.onAddChild = this.onAddChild.bind(this);
        this.handleBulkSaveClick = this.handleBulkSaveClick.bind(this);
    }

    handleBulkSaveClick(event) {
        event.preventDefault();
    }

    /*
     * -- Add Children
     */
    onAddChild() {
        this.state.items.push(BulkEditorForm.defaultProps);

        this.setState({
            items: this.state.items
        });
    }

    render() {
        var forms = this.state.items.map(function(item, index) {                    
            return (
                    <li className="list-group-item" key={index}>                    
                        <BulkEditorForm companies={this.state.customCompanies} item={item} 
                            ref="editorform"></BulkEditorForm>
                    </li>
            );
        }.bind(this));

        return (
                <ul className="list-group">
                    {forms}
                    <li className="list-group-item"> 
                        <div className="btn-group btn-group-sm pull-right" role="group" aria-label="bulk-buttons">
                            <a href="javascript:;" className="btn btn-primary" onClick={this.onAddChild.bind(this)}>
                                <span className="glyphicon glyphicon-plus"></span>
                            </a>
                            <a href="javascript:;" className="btn btn-default" onClick={this.handleBulkSaveClick}>Bulk Save</a>
                        </div>
                        <div className="clearfix"></div>
                    </li>
                </ul>
        );
    }
}

Вот следующий класс

export default class BulkEditorForm extends React.Component {
    constructor(props) {
        super(props);

        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    handleFormSubmit(event) {
        event.preventDefault();

        alert("Submit");
    }

    render() {    
        return (
            <form action='#' method="post" onSubmit={this.handleFormSubmit}>                
                <button type="submit" className="btn btn-link">Save</button>
            </form>
        );
    }
}

Answer 1

В вашем цикле отображения списка форм, используйте разные значения ref для каждой формы:

<BulkEditorForm companies={this.state.customCompanies} item={item} 
                            ref={"editorform"+index}></BulkEditorForm>

Затем, после того как все формы будут обработаны, получите доступ к списку форм по ссылкам в родительском компоненте, что означает добавление componentDidMount() функционировать следующим образом:

class BulkEditor extends React.Component {
  constructor(props) {
  }

  componentDidMount() {
    //using basic javascript "FOR" loop ^^
    for (i = 0; i < this.state.items.length; i++) { 
      this.forms.push(this.refs["editorform"+index]);
    }
  }

}

У меня не было времени для тестирования всего кода, но это идея! Если это еще не работает, не стесняйтесь публиковать здесь некоторые журналы ошибок, тогда мы можем решить это вместе, спасибо ^^