0

Intention: I want to use the data of a user filled reactstrap form after submission/click on finish button to be read/handled in a function/callback.

Tried solution: I created a finish/login/submit button with <Button color="primary" onClick={this.login}>Login</Button> and now have the problem that I do not know how to access the data in the input fields. I guess I somehow have to use the names or ids but can't figure it out.

Question: How to get the user input data from an <Input> field in login()?

Code: 

import React from 'react';
import {Button, Form, FormGroup, Label, Input, Container} from 'reactstrap';

class AWSLogin extends React.Component {

    login() {
        console.log(???); //< Should output the user input in the form field with id "aws_access_key_id"

    };

    render() {
        return (
            <Container>
                <Form>
                    <FormGroup>
                        <Label for="aws_access_key_id">AWS Access Key ID</Label>
                        <Input type="string" name="aws_access_key_id" id="aws_access_key_id"
                               placeholder="AKIAIQBMB7KQWPNDFT7A"/>
                    </FormGroup>
                    <Button color="primary" onClick={this.login}>Login</Button>
                </Form>
            </Container>
        );
    }
}

export default AWSLogin;
Superlokkus
  • 4,731
  • 1
  • 25
  • 57
  • I'd also recommend checking the demos here https://reactjs.org/docs/forms.html – Simone May 22 '18 at 13:07
  • Thx, sorry I didn't found the other question. For some reason btw I had to change the onClick prop of the button, because this was missing in the handler otherwise, but it worked (`onClick={()=>{this.login()}}`) – Superlokkus May 22 '18 at 13:22

1 Answers1

1

Why don't you try this to get the form after submission?

handleSubmit = (event) => {
    console.log('form submitted');
}

<form onSubmit={this.handleSubmit}>
  ...
</form>

For the input you can try controlled component, or something like

<Input name="input1" type="text" onChange={(e) => this.onChange(e.target.value)}/>
Hasanavi
  • 8,455
  • 2
  • 29
  • 35