MBDReact: как сделать клик для строки <datatable>? - PullRequest
Новая
       19

MBDReact: как сделать клик для строки <datatable>?

1 голос
/ 16 апреля 2020

Я настроил 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;

1 Ответ

0 голосов
/ 17 апреля 2020

Чтобы осуществить это, вот что я сделал, но вам нужно оценить это:

  • MDBDataTable требует от вас вручную определения columns и rows.
  • Чтобы данные отображались без проблем, вы определяете columns.field, что соответствует - rows[key]
  • Теперь вот логика c, если вы определить rows[key], что не не соответствует ни одному columns.field, тогда rows[key] определяется для всего row, как мы часто передаем index при работе с map().

Итак, исходя из вышеизложенных наблюдений, Вы можете просто передать 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.

...