React.js：Antd表onRowClick触发所有事件

Question

因此，我是reactjs的新手，我正在做一个表，当您单击1行时，它将呈现该行的详细说明。我有一些按钮可以触发该描述表上的某些事件。但是，当我单击表上的行时，描述仍会呈现，但问题是，当我单击行表而不是按钮时，descroption中的所有事件都将触发。帮助请 这是我的代码：

const [displayCoursesDescription, setDisplayCoursesDescription] = useState({ coursesDescription: [] });
const handleCloseCoursesDescription = () => setDisplayCoursesDescription({ coursesDescription: [] });
const handleReloadCourse = () => {
      setDisplayCoursesDescription({ coursesDescription: [] });
      dispatchStudentCourses();
};

<div className="studentDashboardContent">
    <div className="TableHeader">
      <img className="courseIcon" src={courseActive} alt="courseActive" role="presentation" />
      <p className="courseText">Courses</p>
      <div className="ToolBar">
        <OutlinedButton
          icon={<ReloadOutlined style={{ width: '32px' }} />}
          color={COLOR}
          backgroundColor={BACKGROUND_COLOR}
          display="inline"
          onClick={handleReloadCourse}
        />
        <SearchBox
          placeholder="Search for courses"
          color={COLOR}
          backgroundColor={BACKGROUND_COLOR}
          display="inline" // inline || none
        />
      </div>
    </div>
    {courses && courses.status === API_STATUS.LOADING ? (
      <LoadingIndicator />
    ) : (
      <Table
        className="studentTable"
        columns={columns}
        dataSource={coursesSource}
        pagination={{ hideOnSinglePage: true }}
        onRow={(record) => ({
          onClick: (event) => {
            setDisplayCoursesDescription({ coursesDescription: record });
            getDepartmentById(record.department);
          },
        })}
      />
    )}
  </div>
  {displayCoursesDescription.coursesDescription.key ? (
    <div className="CourseDescription">
      <div className="HeaderButton">
        <a
          href={displayCoursesDescription.coursesDescription.hostname}
          className="courseUrl"
          rel="noreferrer"
          target="_blank"
        >
          <div className="forwardBtn" role="presentation">
            <p className="forwardText">Go to course</p>
            <img className="forwardImg" src={forward} alt="forward" />
          </div>
        </a>
        <Button className="closeBtn" type="primary" icon={<CloseOutlined />} onClick={console.log('click1')} />
      </div>
      <div className="courseCodeName">
        <p className="courseCode">{displayCoursesDescription.coursesDescription.code}</p>
        <p className="courseName">{displayCoursesDescription.coursesDescription.name}</p>
      </div>
      <p className="departmentTitle">DEPARTMENT</p>
      <div className="courseDepartment">
        <img className="departmentImg" src={departmentIcon} alt="department" />
        <p className="departmentName">{departments.name}</p>
      </div>
      <div className="courseDescription">
        <p className="descriptionTitle">COURSE DESCRIPTION</p>
        <p className="description">{displayCoursesDescription.coursesDescription.description}</p>
      </div>
      <Button className="unassignCourse" type="primary" danger onClick={console.log('click2')}>
        Exit course <LoginOutlined />
      </Button>
    </div>
  ) : (
    <div className="studentBackground">
      <div className="dashboardContainer">
        <p className="hiText">Hi {user.name}. How are you today?</p>
        <img className="dashboardIMG" src={dashboardIMG} alt="dashboardimg" />
      </div>
    </div>
  )}

这是当我单击表行时触发2 onClick事件的控制台日志 enter image description here