Question

我想使用react ref来获取被单击的元素，我该怎么做，并替换handleFavoritePairs函数中的此javascript代码。

handleFavoritePairs = (e) => {
        const pairs = e.target.closest('.coin-start').parentNode.getAttribute('symbol');
        console.log(pairs);
}

render() {
coins[this.props.coin].map(coin => {
return (
<div className="landing-ticker-row" symbol={coin[0]} key={coin[0].toString()}>
  <div className="coin-start" onClick={this.handleFavoritePairs}>
    <i className="fas fa-star"></i>
  </div>

  <div className="coin-symbol">{coin[0]}</div>
</div>
);
})
}

Answer 1

这里没有理由使用ref，并且在通过数组映射时会变得棘手。只需制作另一个组件，然后将符号向下传递到该组件即可。然后也传递您的onclick函数。然后，您可以在用户单击符号时将符号传递回父级，如下所示：

handleFavoritePairs = symbol => {
  console.log(symbol);
}

render() {
  coins[this.props.coin].map(coin => {
    return (
      <NewComponent 
        key={coin[0].toString()} 
        symbol={coin[0]} 
        handleFavoritePairs={this.handleFavoritePairs}
      />
    );
  })
}

//new component
const NewComponent = props => (
  <div className="landing-ticker-row">
    <div className="coin-start" onClick={() => props.handleFavoritePairs(props.symbol)} >
      <i className="fas fa-star"></i>
    </div>
    <div className="coin-symbol">{props.symbol}</div>
  </div>
);

如您所见，您正在将符号与handleFavoritePairs函数一起传递到新组件。然后，您可以将符号传递到新组件中的onclick处理程序中，并在用户单击它时将其传递回主组件。

使用引用在响应中单击获取元素

1 个答案: