如何在Reactstrap表单的login()函数中获取Input字段用户输入？

解决Reactstrap表单获取输入值的问题 #

嘿，我来帮你搞定这个问题！在React里获取表单输入值有几种常用的方法，我给你详细拆解一下：

方法一：使用受控组件（推荐） #

这是React官方更提倡的做法，通过组件状态来同步输入框的值，能让你更清晰地掌控表单数据的变化。具体步骤如下：

1. 初始化组件状态，用来存储表单字段的值
2. 编写一个事件处理函数，同步输入框的值到状态中
3. 给Input组件绑定value和onChange属性
4. 在login()函数中直接从状态读取值

修改后的完整代码如下：

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

class AWSLogin extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态，存储表单字段
    this.state = {
      aws_access_key_id: ''
    };
    // 绑定this，避免函数内部this指向错误
    this.login = this.login.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  // 同步输入框值到state
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  login() {
    // 直接从state获取用户输入
    console.log(this.state.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"
              value={this.state.aws_access_key_id}
              onChange={this.handleChange}
            />
          </FormGroup>
          <Button color="primary" onClick={this.login}>Login</Button>
        </Form>
      </Container>
    );
  }
}

export default AWSLogin;

方法二：使用React Ref（适合简单场景） #

如果你不想用受控组件，也可以通过React的ref直接获取DOM元素的值：

1. 创建一个ref实例
2. 把ref绑定到Input组件上
3. 在login()函数中通过ref读取DOM元素的value属性

修改后的代码示例：

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

class AWSLogin extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref实例
    this.accessKeyRef = React.createRef();
    // 绑定this
    this.login = this.login.bind(this);
  }

  login() {
    // 通过ref获取输入值
    console.log(this.accessKeyRef.current.value);
  };

  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"
              ref={this.accessKeyRef}
            />
          </FormGroup>
          <Button color="primary" onClick={this.login}>Login</Button>
        </Form>
      </Container>
    );
  }
}

export default AWSLogin;

小提示 #

• 受控组件的优势在于可以实时监听输入变化，方便做表单验证、实时提示等功能
• Ref的方式更直接，但不利于状态的统一管理，适合简单的表单场景

内容的提问来源于stack exchange，提问作者Superlokkus