如何在 React.js 中將輸入數據傳遞給 function

Question

我正在將 React class 應用程序轉換為 React 鈎子，但我被困在這部分，我想將數據從輸入發送到 function 但它只是不起作用，在 React 類中，一切都使用“this”但是我刪除了它。 我嘗試了一切，但我開始認為它在 React 鈎子中不起作用，在這種情況下，我怎樣才能讓它在反應鈎子中工作？ 謝謝。

這是我關注的代碼部分，用戶名、密碼和記住錯誤表示它們是未定義的。 如果你看一下輸入。 我正在調用“innerRef”來獲取每個值。

const handleLogin = (event) => {
    toggleModal();
    alert(`Username: ${username.value} 
    Password: ${password.value} Remember: ${remember.checked}`);
    event.preventDefault();
}


<Modal isOpen={isModalOpen} toggle={toggleModal}>
        <ModalHeader toggle={toggleModal}>Login</ModalHeader>
        <ModalBody>
            <Form onSubmit={handleLogin(event)}>
                <FormGroup>
                    <Label htmlFor="username">Username</Label>                                         
                    <Input type="text" id="username" name="username"
                        innerRef={(input) => username = input} />
                </FormGroup>
                <FormGroup>
                    <Label htmlFor="password">Password</Label>                            
                    <Input type="password" id="password" name="password"
                        innerRef={(input) => password = input} />
                </FormGroup>
                <FormGroup check>
                    <Label check>
                        <Input type="checkbox" name="remember"
                        innerRef={(input) => remember = input} />
                        Remember me
                    </Label>
                </FormGroup>
                <Button type="submit" value="submit" color="primary">Login</Button>
            </Form>
        </ModalBody>
    </Modal>

Answer 1

React 功能組件不需要this關鍵字。 當您想將輸入發送到 function 時，無需使用 refs - 這通常是為極端情況保留的，不是“反應方式” 您最好通過 state 進行受控輸入（在您的組件，然后進行 onChange function 將輸入值傳遞給 setState）。 我建議看一下官方的反應文檔並對功能組件進行一些研究。 一旦你掌握了鈎子的竅門，使用它們就輕而易舉了。

Answer 2

我覺得你的代碼有幾個問題。 目前我能看到的有：

• 在handleLogin中，您應該首先阻止默認事件，然后執行您想做的事情（調用event.preventDefault()作為 function 中的第一件事，即）
• 當您使用參數分配事件處理程序時（就像您在Form組件的 onSubmit 事件中所做的那樣），像這樣分配它onSubmit={ event => handleLogin(event) }否則它們將立即被調用。 您不希望這樣，您希望他們在事件發生時被調用。
• 不了解代碼中的innerRef位，它們看起來很成問題，但是使用鈎子處理表單輸入的更傳統方法是利用useState鈎子為它們定義 state 變量和設置器，並在相關輸入更改時更新這些狀態. 我的意思是這樣的：

const [username, setUsername] = useState('')

...

<Input 
   type="text" 
   id="username" 
   name="username"
   onChange={ e => setUsername(e.target.value) }/>