javascript - 反应：防止表单提交在 Firefox 上不起作用

Question

我已经编写了一些代码，这些代码将在下面的代码段中提到。它将form数据发布到服务器以下载CSV文件。Chrome 正在按预期工作。但是，在 Firefox 中，页面总是在调用downloadCSV函数时重新加载。

以下a元素包含在我的一个组件中。单击它，触发该downloadCSV功能。

<a ref='downloadAnchor' onClick={this.downloadCsv.bind(this)}>
    <i className='fa fa-download' />
    Download as CSV
</a>

和功能

function downloadCsv() {
    const query = {
        name: 'someName',
        age: 'someAge',
        bla: 'blabla',
        someOtherField: 'bla'
    };

    const form = document.createElement('form');
    form.setAttribute('action', 'some_url');
    form.setAttribute('method', 'post');
    form.addEventListener('submit', e => {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

    // _ is lodash
    _.forEach(query, (v, k) => {
        const input = document.createElement('input');
        input.setAttribute('type', 'hidden');
        input.setAttribute('name', k);
        input.setAttribute('value', v);

        form.appendChild(input);
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

标签： javascriptreactjsfirefoxform-submitdom-events

Answer 1

解决方案是结合@UllasHunka 和@Tholle 的评论。工作代码如下所示：

function downloadCsv(event) {
    // ----->
    event.preventDefault();

    const query = {
        name: 'someName',
        age: 'someAge',
        bla: 'blabla',
        someOtherField: 'bla'
    };

    const form = document.createElement('form');
    form.setAttribute('action', 'some_url');
    form.setAttribute('method', 'post');
    // ----->
    form.setAttribute('target', '_blank');

    form.addEventListener('submit', e => {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

    // remove limit to get all logs
    query.limit = 0;

     _.forEach(query, (v, k) => {
         const input = document.createElement('input');
         input.setAttribute('type', 'hidden');
         input.setAttribute('name', k);
         input.setAttribute('value', v);

         form.appendChild(input);
    });

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}