What is the function of refs in React?

Question

What is the function of refs in React?

Navigation

#1 by (3 votes)

0

I am learning React would like to know the definition or what is its use of refs, I have this function within 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>

javascript react

asked by Gerardo Bautista 17.08.2017 в 15:48

source

1 answer

Upload images png to the server [closed] Erroneous Coding in TextBox

score 3 · Accepted Answer

refs (references) are especially useful when you need to find the DOM markup provided by a component (for example, to position it absolutely).

The ref attribute is of type String.

React also supports the use of a string (instead of a callback) as a reference in any component.

Assign a ref attribute to anything returned render such as:

<input ref="myInput" />

In some other code (typically event handler code), access the backup instance via this.refs as in:

var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();

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 through streaming Reactive props and state . However, it should not be your abstraction to go to the fluid information through your application. By default, use the Reactive data stream and save it for use cases that are inherently unreactive.