React.js refs not showing up inside object

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>
    );
  }
}

I am trying to upload a file and grab it on form submit, I assumed this is done with ref attribute but when I console log my 'this' the refs property is empty. What am I doing wrong?

I also inspected my UserPicForm component using React inspector, the refs section is showing 'null' as well.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Input is a custom element from reactstrap. Taking a look at the source code, it looks like you can get a reference to the input element it renders by using innerRef.

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

When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument.

See more information about refs here.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 6, 2018 at 15:55

Anthony N

9627 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jens · Accepted Answer · 2018-03-06 15:53:16Z

0

Shouldn’t need a ref, event.target.elements.file should give the reference to the input.

If you want to use the ref with the way you set it up, your ref is this.fileUpload.

The refs field should have something if you use ref=‘fileUpload’.

answered Mar 6, 2018 at 15:53

jens

2,15512 silver badges17 bronze badges

Collectives™ on Stack Overflow

React.js refs not showing up inside object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related