咨询redux-form双击防止方法及非表单按钮点击失效问题

我来分享下这两个redux-form场景下的实用解决方案，都是实际项目里验证过的思路：

最常用的两种处理方式：

• 利用redux-form自带的submitting状态
  redux-form会在表单提交过程中自动把submitting设为true，提交完成后恢复为false。直接把这个状态绑定到提交按钮的disabled属性上，提交过程中按钮会被禁用，从根源上避免双击重复提交：

import { reduxForm } from 'redux-form';

const MySubmitForm = ({ handleSubmit, submitting }) => (
  <form onSubmit={handleSubmit(yourSubmitLogic)}>
    {/* 示例表单字段 */}
    <Field name="username" component="input" type="text" />
    
    <button type="submit" disabled={submitting}>提交表单</button>
  </form>
);

export default reduxForm({ form: 'submitForm' })(MySubmitForm);

• 给提交逻辑加防抖处理
  如果你的场景不适合禁用按钮（比如需要自定义按钮状态样式），可以用防抖函数限制短时间内的重复触发。比如用lodash的debounce，或者自己写简易防抖逻辑：

import { reduxForm } from 'redux-form';
import { debounce } from 'lodash';

class MyForm extends Component {
  // 1秒内仅允许触发一次提交，leading设为true确保首次点击立即执行
  debouncedSubmit = debounce((values) => {
    this.props.handleSubmit(values)();
  }, 1000, { leading: true, trailing: false });

  render() {
    return (
      <form onSubmit={this.debouncedSubmit}>
        <Field name="email" component="input" type="email" />
        <button type="submit">提交</button>
      </form>
    );
  }
}

export default reduxForm({ form: 'debounceForm' })(MyForm);

这个问题我之前也遇到过，本质是浏览器事件触发顺序的冲突：当聚焦在表单字段上时，点击非表单按钮的事件顺序是mousedown → blur（表单字段） → mouseup → click。redux-form的同步blur校验会干扰后续的click事件触发，导致第一次点击只执行了blur校验，按钮的click逻辑没生效。

你找到的用onMouseDown替换onClick的方案确实是最优解，因为mousedown事件触发在blur之前，按钮的逻辑会先执行，不会被blur校验阻塞：

原来的按钮代码：

<button onClick={this.handleNonFormButtonClick}>非表单操作</button>

修改后：

<button onMouseDown={this.handleNonFormButtonClick}>非表单操作</button>

如果不想用onMouseDown，也可以尝试把blur校验改成异步（比如用setTimeout包裹校验逻辑），但这样会增加代码复杂度，远不如替换事件类型来得简单直接。

内容的提问来源于stack exchange，提问作者Boris Pinus