React模态框表单添加required属性及按钮onClick双事件实现方法

原始参考代码 #

export default function Modal({onClose}){
    const dispatch = useDispatch();
    const [Name, setName] =useState("");
    const [Email, setEmail] =useState("");

    return (
        <div className="background">
            <div className="modalContainer">

                <div className="title">
                    <h1>Continued As Guest</h1>
                </div>
                <br></br>
                <br></br>
                <div className="body">
                    <form className="Guest" >
                        <input type="text" name = "GuestName" placeholder="Name"  value={Name}
                               onChange={(event) => {setName(event.target.value);}}
                        />

                        <br></br>
                        <br></br>
                        <input type="Email" placeholder="Email" value={Email}
                               onChange={(event) => {setEmail(event.target.value);}}/>
                        <br></br>
                        <br></br>
                        <br></br>
                        <div className= "footer">
                            <button id = "cancel"
                                    onClick={()=>onClose(false)}>Cancel</button>
                                <button    
                                    type = "button"
                                    onClick={() => {
                                        dispatch(addGuest({
                                            Name:Name, Email:Email}));
                                    }}
                                >Continue</button>
                        </div>
                    </form>
                </div>


            </div>
        </div>
    )
}

功能实现说明 #

1. 必填校验实现 #

直接在GuestName输入框标签上加required原生属性即可触发浏览器自带的必填校验，注意要让校验生效，提交按钮不能设置type="button"，需要改成默认的submit类型，同时把提交逻辑绑定在表单的onSubmit事件上，否则原生校验不会触发。如果需要给邮箱也加校验，同理给邮箱输入框加required属性，配合type="email"还能自动校验邮箱格式。

2. 提交+跳转逻辑实现 #

把原来绑定在按钮点击事件上的逻辑移到表单提交回调中，先执行dispatch派发action提交数据，再执行跳转逻辑即可：

• 普通网页跳转直接用window.location.href = 目标地址
• React Router单页应用跳转可以用路由提供的useNavigate钩子实现无刷新跳转

修改后可直接运行的完整代码 #

export default function Modal({onClose}){
    const dispatch = useDispatch();
    const [Name, setName] = useState("");
    const [Email, setEmail] = useState("");

    // 表单统一提交逻辑
    const handleFormSubmit = (e) => {
        // 阻止表单默认刷新页面行为
        e.preventDefault();
        // 第一步：派发action提交访客填写的数据
        dispatch(addGuest({Name, Email}));
        // 第二步：跳转到目标页面，替换为你自己的业务地址即可
        window.location.href = "/your-target-page";
        // React Router项目可替换为下面的单页跳转写法
        // const navigate = useNavigate();
        // navigate("/your-target-page");
    }

    return (
        <div className="background">
            <div className="modalContainer">
                <div className="title">
                    <h1>Continue As Guest</h1>
                </div>
                <br/>
                <br/>
                <div className="body">
                    <form className="Guest" onSubmit={handleFormSubmit}>
                        {/* 新增required属性实现姓名必填校验 */}
                        <input 
                            type="text" 
                            name="GuestName" 
                            placeholder="Name"  
                            value={Name}
                            required
                            onChange={(event) => {setName(event.target.value);}}
                        />
                        <br/>
                        <br/>
                        {/* 可选：给邮箱也加必填+格式校验 */}
                        <input 
                            type="email" 
                            placeholder="Email" 
                            value={Email}
                            required
                            onChange={(event) => {setEmail(event.target.value);}}
                        />
                        <br/>
                        <br/>
                        <br/>
                        <div className="footer">
                            <button 
                                id="cancel"
                                type="button"
                                onClick={()=>onClose(false)}
                            >
                                Cancel
                            </button>
                            {/* 按钮type改为submit，触发表单校验和提交 */}
                            <button type="submit">
                                Continue
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
}

注意：Cancel按钮必须保留type="button"属性，否则点击时会误触发表单提交逻辑。

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