1

我已经table使用MDBReact. datatable这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;
4

1 回答 1

1

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

  • MDBDataTable需要您手动定义columnsand rows。
  • 为了无缝呈现数据，您columns.field定义对应于rows[key]
  • 现在，这里的逻辑是，如果您定义的 arows[key]不对应于 any ，那么就像我们在使用 时经常传递的那样，它是为一个整体定义的。columns.fieldrows[key]rowindexmap()

因此，根据上述观察，
您可以将click eventa 作为一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.

于 2020-04-17T08:32:27.720 回答