通过回调处理`<form>`完成[重复]答案

【问题标题】：Handle `<form>` completion via a callback [duplicate]通过回调处理`<form>`完成[重复]
【发布时间】：2023-04-10 12:37:01
【问题描述】：

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

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

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

代码：

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;

【问题讨论】：

我还建议在这里查看演示 reactjs.org/docs/forms.html
谢谢，抱歉我没有找到其他问题。出于某种原因，顺便说一句，我不得不更改按钮的 onClick 属性，否则处理程序中缺少它，但它可以工作（onClick={()=>{this.login()}}）

标签： twitter-bootstrap reactjs reactstrap

【解决方案1】：

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

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

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

对于输入，您可以尝试controlled component，或类似的东西

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

【讨论】：

没试过（因为链接的重复答案有帮助），但感谢您的努力！
不用担心，很高兴它已经解决了。