如何在 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) }/>