React onClick 按钮未触发该功能

Question

我正在开发一个 chrome 扩展，我需要在其中对用户进行身份验证，但是调用函数的非常简单的 onClick 按钮不起作用 这是我想在单击按钮时在控制台上显示信息的简单代码

import React, { useState } from 'react';

const Login = () => {
    const [user, setuser] = useState("");
    const handleSubmit = (data) => {
        data.preventDefault();
        console.log("usernae: ");
        console.log("Data: ", data.target);
    }
    const getInputValue = (event) => {
        console.log(event.target.value)
        // Select input element and get its value
        console.log("I am heresdfg")
        //   let inputVal = document.getElementsByClassName("usernameInputField")[0].value;
        //   Display the value
        //   alert(inputVal);
    }
    return (

        <div
            id="login-form">
            <p>
                <div className='form'>
                    
                </div>
                <input type="text"
                    id="username"
                    name="username"
                    className='usernameInputField'
                    value={user}
                    onChange={(event => setuser(event.target.value))}
                    placeholder="Username" required />
            </p>

            <p>

                <button onClick={getInputValue} type="button" id="login">button</button>

            </p>

        </div>
    );
};
export default Login;

Answer 1

看起来你想要输入值如果我没记错的话，事件处理程序中的值，你可以从状态中获取它 - user as

 const getInputValue = (event) => {
        console.log(user)
    }

因为 event 将是 button's 你不会从它的事件中得到 input 的值并且它也不是必需的因为它已经处于反应状态......