反应：以“ this”的形式访问目标元素

Question

This has probably been answered before, but I can't seem to google it as it overlaps a bit with .bind(this) questions.

What I want to do is to refer the calling element as this when I run a function eg

highlight()
{
  this.select();
}

<input value={final_line} onClick={this.highlight} ></input>

However, this is undefined after clicking it. So what would the best way to do this? Right now I'm using event.target as a replacement, which works. I've also seen ref being used, but am not sure if this is applicable as I am returning an array of input .

So my question overall is: Is there an alternative to using event.target ?

Answer 1

So what would the best way to do this?

There is no way to do this. Using event.target is actually the right way to achieve it.

If you have several inputs, you should use the name property to identify the targeted element:

inputs.map(input =>
  <input name={input.name} onClick={this.highlight} />
)

highlight(event) {
  this.setState({ [event.target.name]: 'clicked!' })
}

Answer 2

I agree with GG. - you should use event.target , but an alternative is to use refs :

import { Component } from 'react';
import React from 'react';

class MyComponent extends Component {
  render() {
    const { final_line } = this.props;

    return <input value={final_line}
      onClick={ this.highlight.bind(this)}
      ref="inputToHighlight"
    />;
  }

  highlight() {
    this.refs.inputToHighlight.select();
  }
}

Answer 3

使用箭头函数内的call（）作为onClick，将其设置为event.target，例如：

onClick={ (event)=>{onClick.call(event.target, contact.id) }