Question

import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

export default class UserPicForm extends React.Component {

  constructor() {
    super();

    // bindings
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    let file = this;
    console.log('this is the file', file);
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormGroup>
          <Label for="exampleFile">Upload Image</Label>
          <Input ref={(ref) => this.fileUpload = ref} type="file" name="file" id="exampleFile" />
          <FormText color="muted">
            Please use the field above to upload your profile picture. 
          </FormText>
        </FormGroup>

        <Button type="submit">Upload</Button>
      </Form>
    );
  }
}

我正在尝试上传文件并在表单提交时抓取它，我假设这是使用ref属性完成的，但是当我控制台记录我的'this'时，refs属性为空。我做错了什么？

我还使用React检查器检查了我的UserPicForm组件，refs部分也显示为'null'。

Answer 1

Input是来自reactstrap的自定义元素。看一下源代码，看起来您可以使用input获取它呈现的innerRef元素的引用。

<Input innerRef={(ref) => this.fileUpload = ref} />

当ref元素用于HTML元素时，ref回调   接收底层DOM元素作为其参数。

See more information about refs here

Answer 2

不需要ref，event.target.elements.file 应该给出输入的参考。

如果你想按照你设置的方式使用ref，你的ref就是this.fileUpload。

如果使用ref ='fileUpload'，refs字段应该有一些东西。

React.js引用不显示内部对象

2 个答案: