React.js: отправить форму программно не запускается onSubmit event

Question

Я хочу отправить форму React после щелчка по ссылке.

Для этого мне нужно отправить форму программно, если щелкнуть ссылку.

моя проблема: onSubmit обработчик не уволен после отправки формы.

Вот код отрезала, что я сделал для этой цели:

var MyForm = React.createClass({ 
    handleSubmit: function(e){ 
    console.log('Form submited'); 
    e.preventDefault(); 
    }, 
    submitForm : function(e){ 
    this.refs.formToSubmit.submit(); 
    }, 
    render: function() { 
    return (
    <form ref="formToSubmit" onSubmit={this.handleSubmit}> 
    <input name='myInput'/> 
    <a onClick={this.submitForm}>Validate</a> 
    </form>); 
    } 
}); 

ReactDOM.render(
    <MyForm name="World" />, 
    document.getElementById('container') 
); 

handleSubmit не вызывается и поведение по умолчанию выполняется (форма их представления). Является ли это ошибкой ReactJs или нормальным поведением? Есть ли способ вызвать обработчик onSubmit?

Answer 1

Вы должны использовать тег ввода с типом submit вместо тега привязки, поскольку тег привязки не вызывает событие отправки.

render: function() { 
return (<form ref="formToSubmit" onSubmit={this.handleSubmit}> 
    <input name='myInput'/> 
    <input onClick={this.submitForm} type="submit" value="Validate" /> 
</form>); 

}

Answer 2

У меня была такая же проблема, но не смог это исправить. Независимо от того, что я сделал, выполнение document.querySelector('form').submit() не вызовет обработчик onSubmit. Я попытался включить невидимый <input type="submit">, но все же .submit() не запускал его. Поэтому я просто перешел на сохранение невидимой заявки (style="display:none"), а затем сделал .click() на этой невидимой кнопке отправки, на удивление это работает даже с display:none. Тем не менее, я тестировал только в Firefox.

Answer 3

Вашего текущий onSubmit связан с инициированием РЕАКТА SyntheticEvent и не форма родной отправить событие. Это объясняет, почему this.refs.formToSubmit.submit(); не запускает ваш обработчик. Насколько я знаю, попытка вручную запускать SyntheticEvent не рекомендуется или стоит преследовать.

Я считаю, что идиоматический способ достичь этого - структурировать JSX/HTML для использования <button> или <input> типа submit. Любой из них вызовет ваш обработчик handleSubmit. На мой взгляд, это уменьшит сложность, консолидирует ваши обработчики и, похоже, станет вашим лучшим решением.

например.

• <input type="submit" value="Validate" />
• <button type="submit">Validate</button>

Answer 4

Вы не должны ожидать, что форма исх прикрепить дополнительный обратный вызов submit для вас по умолчанию. Это будет плохим дизайном структуры при работе с программно установленными вещами, такими как элемент DOM refs.

Вы должны использовать ref инстанцировать все события, которые необходимы в любом порядке, вы хотите, вместо того, чтобы полагаться на невыразимой внутренней реализации ref [когда реализованный с помощью form элемента].

Это работает:

this.refs.formToSubmit.onSubmit(); 
this.refs.formToSubmit.submit(); 

Actual submit всегда должны происходить в последнюю очередь.