Description
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?