Блог

Я загружаю данные из базы данных в таблицу Reactjs. Из этого я хочу извлечь идентификатор строки и передать его в качестве параметра функции handleEdit .

Данные загружаются нормально, таблица генерируется с правильными данными, включая идентификатор строки movies.MovieID, но я не могу передать данные в функцию.

Это очень легко сделать на многих языках, за исключением того, что я застрял на этом в течение 2 дней в Reactjs.

Что бы я ни делал, я получаю ту же ошибку «Ошибка типа: _this3.handleEdit не является функцией» в событии щелчка.

Использование reactjs в ASP.net ядро 2.2

 this.handleEdit = this.handleEdit.bind(this);

handleEdit(id) {
    alert.show("Movie ID = "   id);
    console.log('Click happened');
}

static renderMoviesTable(allmovies) {
    return (
        <Table className="table table-striped"><thead>
            <tr><th></th>
                <th>ID</th>
                <th>Title</th>
                <th>Year</th>
                <th>Plot</th>
                <th>Genre</th>
            </tr></thead><tbody>
                {allmovies.map(movies =>
                    <tr key={movies.movieID}>
                        <td><Button onClick={() => this.handleEdit(this, movies.movieID)} className="btn-info">Edit</Button></td>
                        <td>{movies.movieID}</td>
                        <td>{movies.title}</td>
                        <td>{movies.year}</td>
                        <td>{movies.plot}</td>
                        <td>{movies.genre}</td>
                    </tr>
                )};
            </tbody>
        </Table>
    );
  

Вот весь класс с ненужными вещами, отобранными

 import React, { Component } from "react";
import { Button } from "reactstrap";
import { Table } from "reactstrap";

export class FetchMovies extends Component {
static displayName = FetchMovies.name;

constructor(props) {
    super(props);
    this.state = {
        allmovies: [],
        editMovie: [],
        selectedMovieID: "",
        title: "",
        year: "",
        plot: "",
        genre: "",
        isEditForm: false, //bool to check if you are editing
        loading: true
    };
       this.handleEdit = this.handleEdit.bind(this);

    fetch('api/Movies')
        .then(response => response.json())
        .then(data => {
            this.setState({ allmovies: data, loading: false });
        });
}

handleEdit(id) {
    alert.show("Movie ID = "   id);
    console.log('Click happened');
}

static renderMoviesTable(allmovies) {
    return (
        <Table className="table table-striped"><thead>
            <tr><th></th>
                <th>ID</th>
                <th>Title</th>
                <th>Year</th>
                <th>Plot</th>
                <th>Genre</th>
            </tr></thead><tbody>
                {allmovies.map(movies =>
                    <tr key={movies.movieID}>
                        <td><Button value={movies.movieID} onClick={() => this.handleEdit(movies.movieID)} className="btn-info">Edit</Button></td>
                        <td>{movies.movieID}</td>
                        <td>{movies.title}</td>
                        <td>{movies.year}</td>
                        <td>{movies.plot}</td>
                        <td>{movies.genre}</td>
                    </tr>
                )};
            </tbody>
        </Table>
    );
}


render() {
    let movieContents = this.state.loading
        ? <p><em>Loading Movies...</em></p>
        : FetchMovies.renderMoviesTable(this.state.allmovies);

     const { isUser, addClicked, isEditForm, helper } = this.state;
    return (
        <div>
            <h1>All Movies</h1>
            {!isEditForm amp;amp; movieContents}
        </div>
    );
}
}
  

Я вижу это!

Это потому, что вы объявили метод renderMoviesTable как static метод. Удалите ключевое слово static из этого метода, и это должно сработать, а затем вызовите функцию через this.renderMoviesTable вместо этого

Статический метод не получает доступа this , как вы думаете, они будут: https://medium.com/@yyang0903/static-objects-static-methods-in-es6-1c026dbb8bb1