如何使用 onClick 事件在 React 中查找子元素

Question

我正在觸發 Click 事件，如下所示，我想訪問子元素“.details”。 請建議如何實現這一點，我想在單擊父 .movi​​e 時將顏色應用於子節點“.details”

return (
  <div className="movie" onClick={e => this.selectMovie(e)}>
    <div className="floatleft">
      <img alt={Title} src={Poster} />
    </div>
    <div className="floaright">
      <h3>{Title}</h3>
      Year : <b>{Year}</b>
      <br />
      <br />
      Director : <b>{Director}</b>
      <br />
      Production : <b>{Production}</b>
      <br />
      <br />
      Actor : <b>{Actors}</b>
      <br />
      <br />
      Released : <b>{Released}</b>
      <br />
    </div>
    <div className="details">
      =============
      {Runtime}
      {imdbRating}
    </div>
  </div>
);

selectMovie = e => {
  console.log(e);
  //console.log(data)
  //event.currentTarget.find('.details').style.backgroundColor = '#ccc';
};

Answer 1

不推薦，您可以使用 state 並基於此添加類或動態樣式。

class MyComponent extends React.Component {
  state = {
    isSelected: false
  };
  render() {
    return (
      <div className="movie" onClick={e => this.selectMovie(e)}>
        <div className="floatleft">
          <img alt={Title} src={Poster} />
        </div>
        <div className="floaright">
          <h3>{Title}</h3>
          Year : <b>{Year}</b>
          <br />
          <br />
          Director : <b>{Director}</b>
          <br />
          Production : <b>{Production}</b>
          <br />
          <br />
          Actor : <b>{Actors}</b>
          <br />
          <br />
          Released : <b>{Released}</b>
          <br />
        </div>
        <div className="details" style={isSelected ? { backgroundColor: '#ccc'} : {}}>
          =============
          {Runtime}
          {imdbRating}
        </div>
      </div>
    );
  }

  selectMovie = e => {
    console.log(e);
    this.setState({ isSelected: true });
  };
}

好的做法是將其設為<button></button>元素而不是 div。 如果您有其他功能，例如單擊此按鈕時提交某些內容，請使用<form></form>

  <button className="movie" onClick={e => this.selectMovie(e)}>
    <div className="floatleft">
      <img alt={Title} src={Poster} />
    </div>
    <div className="floaright">
      <h3>{Title}</h3>
      Year : <b>{Year}</b>
      <br />
      <br />
      Director : <b>{Director}</b>
      <br />
      Production : <b>{Production}</b>
      <br />
      <br />
      Actor : <b>{Actors}</b>
      <br />
      <br />
      Released : <b>{Released}</b>
      <br />
    </div>
    <div className="details" style={isSelected ? { backgroundColor: '#ccc'} : {}}>
      =============
      {Runtime}
      {imdbRating}
    </div>
  </button>

Answer 2

您可以為此使用ref ：

this.detailsRef = React.createRef(); // ---- in constructor
........
// assign it here
<div class="details" ref={this.detailsRef}

現在您可以使用this.detailsRef來獲取元素並使用它：

selectMovie = e => {
  console.log(e);
  //console.log(data)
  //event.currentTarget.find('.details').style.backgroundColor = '#ccc';
  this.detailsRef.current.style.backgroundColor = '#ccc';//<-------------this one here
};