How to pass input data to a function in React.js

Question

I am transforming a React class application to React hooks, but I am stuck in this part, I want to send data from the input to a function but It just does not work, in React classes everything worked with the use of "this" but I removed it. I tried everything, but I am starting to think that It does not work in React hooks, in that case how can i make it work in react hooks? Thanks.

This is the part of the code where I am focused, the username, password and remember error say that they are undefined. If you take a look to the inputs. I am invoking "innerRef" to take each value.

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 Functional Components don't need this keyword. When you want to send input to a function there's no need to use refs - that's usually reserved for extreme cases and is not "the react way" You're better off doing a controlled input via state (call a useState hook at the top of your component and then make an onChange function that passes the value of input to setState). I would advise to have a look at the official react docs and do a bit of research about functional components. Once you get the hang of hooks, they are a breeze to work with.

Answer 2

I feel like there are several issues with your code. The ones that I can see at the moment are:

• In handleLogin , you should first prevent the default event and do what you want to do afterwards (call event.preventDefault() as the first thing in that function, that is)
• When you assign event handlers with params (like you did in Form components' onSubmit event), assign it like this onSubmit={ event => handleLogin(event) } or else they will get called instantly. You don't want that, you want them to get called when the event happens.
• Don't understand the innerRef bits in your code, they look quite problematic, but a more traditional way of handling form input with hooks would be to leverage useState hook to define state variables and setters for them and updating these states when the relevant input change. I mean something like this:

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

...

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