Question

我有一个生成多行的组件，在这些行中，我有许多绑定了onChange函数的输入。我需要出于setState的目的访问当前行的键。因此，我为所有输入data-id={key}声明了一个数据属性，

所有这些工作都很好，但是我认为这是可以避免的高成本资源？

我曾经在Jquery中将键道具传递给公共父级（<tr>），并使用功能parentsUntil()。但是我不认为这是React的目标。有什么建议可避免在我的所有输入中传递密钥并避免访问我父母（<tr>）上的当前键道具吗？

Answer 1

实际的DOM元素/属性可以在事件处理程序中reached，例如：

handleChange(event) {
  const parentRow = event.target.parentElement.parentElement;  // input -> td -> tr
  const id = parentRow.attr("data-id");
  this.props.handleChange( {
    value: event.target.value, 
    rowId: id
  });
}

当然，处理程序可以（并且应该）在父级中完全定义（并绑定）并作为prop传递。

Answer 2

如果查看您的代码（已嵌入问题中）

<tr key={key} id={key}>
    <td>
        <input name="quoteProducts.code" data-id={key} value={code} onChange={this._handleChange}/>
    </td>

有this._handleChange处理程序。调用它时，第一个参数将为event。它具有currentTarget的DOM Element属性。 DOM元素具有parentNode属性。在您的代码中，parentNode将为<td>。反过来，它还具有您需要的<tr>的parentNode。然后，您可以访问所需的<tr>的ll个属性。

示例：

_handleChange (event) {
    event.currentTarget.parentNode.parentNode.id // This is id of <tr>
}

使用前面的示例可以轻松访问任何React组件的

id。

访问所有儿童活动的父键道具

2 个答案: