I am learning React I would like to know the definition or what is its use of refs, I have this function inside a submit, what value does it get from refs?
onSubmit(e) {
e.preventDefault();
let email = this.refs.email.value.trim();
let password = this.refs.password.value.trim();
render() {
return (
<div>
<h1>Join Short Lnk</h1>
{this.state.error ? <p>{this.state.error}</p> : undefined}
<form onSubmit={this.onSubmit.bind(this)}>
<input type="email" ref="email" name="email" placeholder="Email"/>
<input type="password" ref="password" name="password" placeholder="Password"/>
<button>Create Account</button>
</form>
<Link to="/">Already have an account?</Link>
</div>
refs (references) are especially useful when you need to find the DOM markup rendered by a component (for example, to position it absolutely).
The ref attribute is of type String.
React also supports using a string (instead of a callback) as a reference in any component.
Assign a ref attribute to whatever render returns like:
In some other code (typically event handler code), access the backing instance via this.refs as in:
Refs are a great way to send a message to a particular instance of a child in a way that would be inconvenient to do via streaming Reactive props and state . However, they shouldn't be your abstraction of going to the information flowing through your application. By default, use the Reactive data stream and save it ref for use cases that are inherently non-reactive.