React中子组件点击行如何修改父组件样式并传递行数据？

咱们一步步来解决你的两个问题：先搞定传递被点击行的ID，再实现修改父组件样式的需求。

1. 传递点击行的ID给父组件 #

你已经把点击事件从父组件传递到了List组件，现在只需要在ListRow组件触发事件时带上当前行的信息就行：

修改ListRow组件的点击逻辑 #

在ListRow的点击处理方法里，调用父组件传过来的onRowClicked时，把当前行的id（或者整行数据，看你需求）传过去：

class ListRow extends React.Component {
  handleRowClick = () => {
    // 传递当前行的ID给父组件回调
    this.props.onRowClicked(this.props.rowItems.id);
    // 如果需要整行数据，就传this.props.rowItems
    // this.props.onRowClicked(this.props.rowItems);
  }

  render() {
    const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
    return (
      <tr 
        className={this.state.isExpanded ? 'testclass' : "experiment-list__row"} 
        onClick={this.handleRowClick}
      >
        <td>{this.props.rowItems.firstName + ' ' + this.props.rowItems.lastName}</td>
        <td>{this.props.rowItems.jobTitle}</td>
        <td>Email@Email.com</td>
        <td>{this.props.rowItems.employmentType}</td>
      </tr>
    );
  }
}

父组件接收行ID参数 #

修改父组件的toggleEmployerInfo方法，就能拿到点击行的ID了：

toggleEmployerInfo(rowId) {
  console.log('点击的行ID是:', rowId);
  // 这里后续用来更新状态，控制父组件样式
}

2. 修改父组件的样式 #

要修改父组件里div.experiments或div.experiments-list-container的样式，需要在父组件里维护一个状态记录当前选中的行，再根据状态动态设置className：

父组件添加激活状态 #

在父组件的state里新增activeRowId，用来标记当前点击的行：

class ParentComponent extends React.Component {
  state = {
    employeeData: [],
    activeRowId: null // 初始无选中行
  }

  toggleEmployerInfo(rowId) {
    // 切换激活状态：如果点击的是当前激活行，就取消；否则设置为当前行ID
    this.setState(prevState => ({
      activeRowId: prevState.activeRowId === rowId ? null : rowId
    }));
  }

  render() {
    // 根据activeRowId动态生成className
    const experimentsClass = `experiments ${this.state.activeRowId ? 'expanded' : ''}`;
    const containerClass = `experiments-list-container ${this.state.activeRowId ? 'container-expanded' : ''}`;

    return (
      <div className={experimentsClass}>
        <div className={containerClass}>
          <List 
            rowItems={this.state.employeeData} 
            onRowClicked={this.toggleEmployerInfo.bind(this)} 
          />
        </div>
      </div>
    );
  }
}

编写激活状态的CSS #

最后在你的样式文件里添加对应激活状态的样式：

/* experiments容器激活样式 */
.experiments.expanded {
  background-color: #f8f9fa;
  padding: 10px;
}

/* 列表容器激活样式 */
.experiments-list-container.container-expanded {
  border: 2px solid #007bff;
  border-radius: 4px;
}

这样一来，点击行的时候，父组件会更新activeRowId状态，动态改变对应的div的className，实现样式切换，同时还能拿到点击行的ID做其他业务处理。

内容的提问来源于stack exchange，提问作者Dawn17