Question

在我的父组件中，我使用了一个名为List的组件，如下所示。

  render() {
    return (
      <div className="experiments">

        <div className="experiments-list-container">
          <List rowItems={this.state.employeeData} />
        </div>
      </div>
    );
  }
}

在我的List组件中，我试图在每次单击每个项目时更改样式。所以我做的是：

  render() {
    const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
    return (
      <tr
        className={this.state.isExpanded ? 'testclass' : "experiment-list__row"} 
        //className="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>
    );
  }

每当我点击表格中的一行时，它都会将this.state.isExpanded更改为True。但是，我实际想要更改的格式是<div className="experiments">或<div className="experiments-list-container">。但我不知道如何改变上层组件的风格。请帮忙。

修改

感谢您的回复。我试过的是，

const List = props => {
  return (
    <table className="experiment-list">
      <tbody>
        <ListHeader />
        {props.rowItems.map((data, i) => <ListRow
          key={i} 
          rowItems={data}
          onRowClicked={props.onRowClicked} />)}
      </tbody>
    </table>
  );
};

和

  toggleEmployerInfo(e) {
    alert('dd')
  }

在我的父组件中。

每当我点击每一行时，它都会正确警告“dd”。

但是，我最终想要做的是传递点击行的信息。

在我的父组件中，我通过

使用List

      <div className="experiments-list-container">
        <List
          rowItems={this.state.employeeData} 
          onRowClicked={this.toggleEmployerInfo.bind(this)}
        />
      </div>

这会将所有数据正确地呈现到每一行，但是如何让每一行正确读取该行所具有的项目的ID？

Answer 1

您可以将事件处理程序传递给List组件，并在单击行时调用它。在这里，我将父组件中的handleRowClick定义为ES6箭头函数。然后我通过onRowClicked prop。

将此函数作为回调传递给子组件

// parent.jsx

handleRowClick = (id) => {
    // Handle click event, update state, etc.
    console.log(id);
}

render() {
    return (
        <div className="experiments">
            <div className="experiments-list-container">
                <List rowItems={this.state.employeeData} onRowClicked={this.handleRowClick} />
            </div>
        </div>
    );
}

然后在onRowClicked事件上为您要响应的每个元素调用onClick函数。

// list.jsx

render() {
    return (
        // Extremely simplified example...
        <div onClick={() => this.props.onRowClicked('row-id-goes-here')}>row content</div>
    );
}

此处的箭头函数语法允许我们指定默认event参数旁边的参数，如果您刚使用onClick={this.props.onRowClicked}，则会获得这些参数。

这是一篇比我更好地解释这种方法的帖子：https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb

如何更改父组件的样式？

1 个答案: