反应：防止表单提交在 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);
}

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);
}

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

react: preventing form submission not working on Firefox

javascript

firefox

form-submit

dom-events

reactjs