twitter-bootstrap - 处理`` 通过回调完成

Question

意图：我想在提交/单击完成按钮后使用用户填写的 reactstrap 表单的数据在函数/回调中读取/处理。

尝试过的解决方案：我创建了一个完成/登录/提交按钮，<Button color="primary" onClick={this.login}>Login</Button>现在遇到的问题是我不知道如何访问输入字段中的数据。我想我必须以某种方式使用名称或 ID，但无法弄清楚。

问题：如何从一个<Input>字段中获取用户输入数据login()？

代码：

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;

标签： twitter-bootstrapreactjsreactstrap

Answer 1

提交后为什么不试试这个来获取表单？

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

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

对于输入，您可以尝试受控组件，或类似的东西

<Input name="input1" type="text" onChange={(e) => this.onChange(e.target.value)}/>