Skip to content

"ref" is referred to as if it is an already taught concept #586

Closed
@githubshrek

Description

@githubshrek

On the Quick Start, Forms page:
https://reactjs.org/docs/forms.html
there is the sentence:
"The following example shows how a ref can be used to access file(s) in a submit handler"

There is no explanation at all of what a ref is. It's assumed that the reader knows what is being talked about.

When I was trying to understand the example, I assumed to begin with that "ref" was simply some HTML attribute with which I was not familiar.

It appears, however, that refs are a whole new, and rather complex side issue which need their own detailed explanation:
https://reactjs.org/docs/refs-and-the-dom.html

When I was trying to reproduce the example (by erasing the original and just writing it myself), the following is what I came up with. It doesn't use a ref at all, but gives the name with the path.

class FileForm extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  
  handleSubmit(event) {
    event.preventDefault();
    alert("File name is: " + this.state.value);
  }
  
  render() {
    return(
      <form onSubmit={this.handleSubmit} >
        <label>
          OK, pick a file, any file:
        <input type="file" onChange={this.handleChange} />
        </label>
        <br />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <FileForm />,
  document.getElementById("root")
);

I'm not sure that the example with the ref is needed in the Quick Start section on forms. Wouldn't it be better as a part of the "Refs and the DOM" page?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions