Question

之前可能已经回答了这个问题，但我似乎无法谷歌，因为它与.bind(this)个问题重叠了一段时间。

我想要做的是在运行一个函数时将调用元素称为this。

highlight()
{
  this.select();
}

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

但是，点击后this未定义。那么最好的方法是什么呢？现在我使用event.target作为替代品，这是有效的。我也看到ref正在使用，但我不确定这是否适用，因为我正在返回input数组。

所以我的问题是：是否有使用event.target的替代方法？

Answer 1

那么最好的方法是什么？

没有办法做到这一点。使用event.target实际上是实现它的正确方法。

如果您有多个输入，则应使用name属性来标识目标元素：

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

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

Answer 2

我同意GG。 - 您应该使用event.target，但另一种方法是使用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) }

React：访问目标元素＆＃39;这个＆＃39;

3 个答案: