React+Redux Noob-提交表单数据

Question

在学习了一些Redux和react的教程后，我刚刚开始尝试react，但在控制台中出现了一个错误：

警告：不能给无状态函数组件提供refs（请参见登录创建的FieldGroup中的ref“username”）。访问此引用的尝试将失败。

将表单字段输入值传递给“提交”按钮的正确方法是什么？这些值应该进入redux存储吗？在阅读了文档:https://reactjs.org/docs/refs-and-the-dom.html#a-complete-example之后，在这种情况下我似乎应该避免使用refs。那么，如果没有refs，我如何将输入值获取到submit按钮？谢谢你的帮助。

login.jsx

import React, {Component, PropTypes} from 'react';
import {Row, Col, FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Button} from 'react-bootstrap';

export default class Login extends Component {

  render() {
    const { errorMessage } = this.props;
    function FieldGroup({ id, label, help, ...props }) {
      return (
        <FormGroup controlId={id}>
          <ControlLabel>{label}</ControlLabel>
          <FormControl {...props} />
          {help && <HelpBlock>{help}</HelpBlock>}
        </FormGroup>
      );
    }

    const formInstance = (


          <Col xs={12} md={8} mdOffset={2}>
            <code>&lt;{'Col xs={12} md={8}'} /&gt;</code>
            <form>
              <FieldGroup
                id="formControlsEmail"
                type="email"
                label="Email address"
                placeholder="Enter email"
                ref="username"
              />
              <FieldGroup
                id="formControlsPassword"
                label="Password"
                type="password"
                ref="password"
              />
              <Checkbox checked readOnly>
                Checkbox
              </Checkbox>

              <Button type="submit" onClick={(event) => this.handleClick(event)}>
                Submit
              </Button>
              {errorMessage &&
                <p>{errorMessage}</p>
              }
            </form>
          </Col>

    );
    return formInstance;
  }

  handleClick(event) {
    const username = this.refs.username
    const password = this.refs.password
    const creds = { username: username.value.trim(), password: password.value.trim() }
    this.props.onLoginClick(creds)
  }
}

Login.propTypes = {
  onLoginClick: PropTypes.func.isRequired,
  errorMessage: PropTypes.string
}

Answer 1

react（无状态）中的功能组件没有refs。

从官方文件中

ref和Functional Components您不能在Functional Components上使用ref属性，因为它们没有实例：

如果需要refs，请使用ES6类，如果不需要，请使用父login组件中的this.state，并使用类语法；如果fieldgroup的输入值发生更改，请使用this.setstate(yourState)

然后你会做

handleClick(event) {
    const username = this.state.username
    const password = this.state.password
    const creds = { username: username.value.trim(), password: password.value.trim() }
    this.props.onLoginClick(creds)
  }

从文档中：

但是，只要引用DOM元素或类组件，就可以在函数组件中使用ref属性：