MBDReact：如何使 <datatable> 行可点击？答案

【问题标题】：MBDReact: How do I make a <datatable> row clickable?MBDReact：如何使 <datatable> 行可点击？
【发布时间】：2020-04-17 21:38:18
【问题描述】：

我已经使用datatable 在我们的应用程序的管理端设置了我的table 和MDBReact。这个table 显示了我所拥有故事的一些小细节。

现在我必须创建一个row 可点击，即添加onClick 以使用故事id 作为参数传递给该函数进行函数调用。

问题：
如何将onClick 事件添加到datatable 行？

（下面是我的代码。）

  class Posts extends Component {
      componentDidMount() {
        this.getPosts();
      }
      getPosts = async () => {
        const response = await fetch("http://****************/get_posts");
        const post_items = await response.json();
        this.setState({ posts: post_items.result }, () => {
          console.log(this.state.posts);
          this.setState({ tableRows: this.assemblePost() });
        });
      };

      assemblePost = () => {
        let posts = this.state.posts.map((post) => {
          let mongoDate = post.dateAdded.toString();
          let mainDate = JSON.stringify(new Date(mongoDate));
          return {
            postTitle: post.storyTitle,
            // postDescription: post.storyDescription,
            dateAdded: mainDate.slice(1, 11),
            thankedBy: post.thankedBy.length,
            reportedBy: post.reportedBy ? post.reportedBy.length : "",
            userEmail: post.userEmail[0],
            categoryName: post.categoryName[0],
          };
        });
        console.log(posts);
        return posts;
      };
      state = {
        posts: [],
        tableRows: [],
      };
      render() {
        const data = {
          columns: [
            {
              label: "Story Title",
              field: "postTitle",
            },
            { label: "Category Name", field: "categoryName" },
            {
              label: "User Email",
              field: "userEmail",
            },
            {
              label: "Date Added",
              field: "dateAdded",
            },
            {
              label: "Thanked",
              field: "thankedBy",
            },
            {
              label: "Reported",
              field: "reportedBy",
            },
          ],
          rows: this.state.tableRows,
        };
        return (
          <div className="MDBtable">
            <p className="posts">Posts List</p>
            <MDBDataTable striped bordered hover data={data} />
          </div>
        );
      }
    }

    export default Posts;

【问题讨论】：

标签： javascript reactjs mdbreact

【解决方案1】：

要实现这一点，我就是这样做的，但你需要欣赏这些：

MDBDataTable 要求您手动定义 columns 和 rows。
为了无缝呈现数据，您定义了columns.field，它对应到rows[key]
现在，逻辑如下，如果您定义一个不对应于任何 columns.field 的 rows[key]，那么就像我们经常为整个 row 定义 rows[key]使用 map() 时通过 index。

因此，根据上述观察，
您可以将 click event 作为 key/value 对传递给 row。
它会正常工作。

// ...
assemblePost = () => {
  let posts = this.state.posts.map(
    (post, i) => {
       let mongoDate = post.dateAdded.toString();
       let mainDate = JSON.stringify(new Date(mongoDate));

       return {
          index: i + 1,  // advisable to pass a unique identifier per item/row
          clickEvent: () => this.handleClick(storyId), // pass it a callback function
          postTitle: post.storyTitle,
          // ...others
          categoryName: post.categoryName[0],
       };
  });
  console.log(posts);
  return posts;
};
// ...

请注意，此clickEvent: () => this.handleClick(storyId), 将附加到整个row。

【讨论】：