如何使用 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
};