Question

意图：我想在提交/点击完成按钮后使用用户填充的反应表形式的数据在函数/回调中读取/处理。

尝试过的解决方案：我创建了一个带有<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;

Answer 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)}/>

通过回调处理`<form>`完成

1 个答案: