Reactjs-onClick 事件在我第一次单击按钮时未触发

Posted 2023-03-14

【中文标题】Reactjs-onClick 事件在我第一次单击按钮时未触发

【英文标题】：Reactjs-onClick event not firing the first time i click button

【发布时间】：2019-02-21 15:58:07

【问题描述】：

我有一个问题，当我第一次单击时，我的按钮没有触发，但第二次单击时正常工作，有什么帮助吗？我不明白为什么会这样

    render() 
    return (
    <button type="button" className="basic-submit-button"  onClick=this.submitUsernameChange>window.main.resources["SaveChangesButton"]</button>
    );


submitUsernameChange() 
    if (this.canSubmit()) 
        PersonalInfoActions.changeUsername(this.state.newUsername);
        HeaderActions.logout();
        this.setState( submitting: false );
    

    constructor(props) 
    super(props);

    this.submitUsernameChange = this.submitUsernameChange.bind(this);
    this.state = PersonalInfoStore.getState();

【问题讨论】：

this.canSubmit()，你能不能把这个方法展示一下

canSubmit() return this.refs.newUsername.isValid();我试图调试它，但第一次点击它没有输入 submitUserNameChange 方法

你能在这里创建一个可重现的代码框吗codesandbox.io/s/new

我想我不能，这是一个非常大的复杂项目，有很多文件:(

【参考方案1】：

如果有人遇到此类错误，我修复了将 handlerBur 更改为 onKeyPressUp 事件的问题。似乎是重叠的事件。

【参考方案2】：

在允许表单提交之前，您应该检查 newUsername 是否有效。您可以禁用提交按钮并检查用户名在类型上是否有效。

【讨论】：

是的，完整的 js 文件已经验证过了，真正的问题是它在第一次点击时没有进入 submitUserNameChange 方法，已经尝试调试它。