面试题：React中如何处理表单的提交事件并获取输入值

创建React组件并初始化状态：在React组件中，使用useState钩子来初始化用户名和密码的状态。

import React, { useState } from'react';

const LoginForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

定义事件处理函数：创建一个处理表单提交的函数，在这个函数中，阻止表单的默认提交行为（避免页面刷新），然后获取当前用户名和密码的值。

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(`Username: ${username}, Password: ${password}`);
        // 这里可以添加实际的登录逻辑，比如发送API请求
    };

渲染表单并绑定事件：在return语句中渲染表单，并将handleSubmit函数绑定到表单的onSubmit事件上。同时，为输入框绑定onChange事件，以更新相应的状态。

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Username:
                <input
                    type="text"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                />
            </label>
            <br />
            <label>
                Password:
                <input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
            </label>
            <br />
            <button type="submit">Submit</button>
        </form>
    );
};

export default LoginForm;

以上代码展示了在React中如何处理包含用户名和密码的登录表单的提交事件，并获取相应的值。当用户点击提交按钮时，handleSubmit函数会被调用，在控制台打印出用户名和密码，你也可以在这个函数中添加实际的登录逻辑。

星途面试题库

面试题：React中如何处理表单的提交事件并获取输入值

知识考点

面试题答案