Question

我刚刚开始尝试使用Redux和React上的一些教程，我在控制台中收到错误：

警告：无状态函数组件不能给出refs（参见参考资料由Login创建的FieldGroup中的“username”。试图访问它参考将失败。

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

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 。

来自官方docs

参考和功能组件您可能不会在功能组件上使用ref属性，因为它们没有实例：

如果您需要引用，请使用ES6类，如果不使用来自您的父this.state组件的Login类语法，并在输入值更改时使用this.setState(yourState)代替FieldGroup 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) }

然后在你的身上你会做

sort

来自docs：

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

React + Redux Noob - 提交表单数据

1 个答案: