Next.js中onChange影响onClick触发 如何分离两类事件解决冲突

三个问题叠加导致异常：

• 表单内的<button>默认type为submit，未手动指定类型时，点击会触发浏览器原生表单提交，导致页面刷新，表现为onClick绑定的逻辑不执行。
• 错误使用while循环做渲染分支判断，且userToken是普通局部变量，不是响应式状态：每次输入框触发onChange、组件重渲染时，userToken都会被重置为初始值undefined，非标准的返回逻辑会打断React的事件委托更新流程。
• 事件绑定加()属于语法误用：onClick={fn()}会在组件每次渲染时直接执行fn，而非等待点击事件触发，因此输入时重渲染就会连带执行点击处理函数。

• 移除错误的while循环写法，改用React标准的条件判断做分支渲染；如果需要根据userToken切换视图，必须用useState将其声明为响应式状态。
• 给表单内的操作按钮添加type="button"属性，阻止默认提交行为；如果需要保留回车提交能力，也可以直接在<form>标签上绑定onSubmit事件，调用e.preventDefault()拦截原生跳转即可。
• 事件绑定保持onClick={函数名}的写法，不要在绑定位置加执行括号。

修复后的完整可运行代码：

import React, { useState } from "react";

export default function Username(props) {
    const [userName, setUsername] = useState('');
    // 将userToken声明为响应式状态
    const [userToken, setUserToken] = useState(null);
    const address = props.address;

    function handleChange(event) {
        setUsername(event.target.value);
    }

    function loginAccount() {
        console.log('account created');
        // 业务逻辑执行完成后更新token即可自动切换到已登录视图
        // setUserToken('实际获取到的token值')
    }

    function createAccount() {
        console.log('logged in');
    }

    function hi(){
        console.log('hi');
    }

    // 标准条件渲染判断
    if (!userToken) {
        return (
            <>
                <div>
                    <p className="account-Info">address: {address}</p>
                </div>
                <div id="form">
                    <h2 className='user-Create'>Username</h2>
                    <form id='set-User' onSubmit={(e) => e.preventDefault()}>
                        <input 
                            id='username' 
                            className="user-Create" 
                            type='text' 
                            value={userName} 
                            onChange={handleChange} 
                            required 
                            minLength='3' 
                            maxLength='30' 
                            pattern="[a-zA-Z0-9_]+" 
                            title='only letters, numbers, and underscores.'
                        />
                        <button type="button" className='user-Create' onClick={loginAccount}>Create Account</button>
                        <button type="button" className='user-Create' onClick={createAccount}>Login</button>
                        <button type="button" className='user-Create' onClick={hi}>hi</button>
                    </form>
                </div>
            </>
        )
    }

    return <p>hello</p>
}

补充：如果后续需要实现表单回车提交，只要把提交逻辑放到form的onSubmit处理函数中即可，不需要额外给按钮绑定点击事件。

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