Question

我有一个React前端发布到我的节点api，这是一种简单的待办事项。我想列出所有的电影/待办事项，我的工作就好了。但是，当我在所有返回的电影上执行forEach以动态添加表格行及其表格数据时，我会在列表中包含一个用于删除电影的按钮。一切都按预期显示，但删除按钮不执行任何操作。看起来不对，但我没有想法。

这是问题所在的handleGetMovies函数：

        handleGetMovies() {
        $.get( "http://localhost:8080/api/movies", function( movies ) {
            movies.forEach(function( movie ) {
                $('#movieList').append('<tr><td>' + movie.title + '</td><td>' + movie.genre + '</td><td>' + movie.year + 
                '</td><td>' + movie.actors + '</td><td>' + movie.rating + '</td><td><button id=' + movie._id + 
                'onClick="{this.handleDelete.bind(this,id)}"' +'>Delete Title</button></td></tr>');
            })
        });
    }

这完全是：

    class Hello extends React.Component {
    componentWillMount() {
        return console.log('In componentWillMount')
    }
    handleSubmit() {
        let movie = {
            title: this.title.value,
            genre: this.genre.value,
            year: this.year.value,
            actors: this.actors.value.split(','),
            rating: this.rating.value
        }
        console.log(movie);

        $.post( "http://localhost:8080/api/movies", movie );
    }

    handleDelete() {
        console.log('>>>>> deleteID', deleteId)
        let deleteId = this.deleteMovie.value;
        $.ajax({
            url: 'http://localhost:8080/api/movies/' + deleteTitle,
            type: 'DELETE',
            success: function(result) {
            }
        });
    }

    handleGetMovies() {
        $.get( "http://localhost:8080/api/movies", function( movies ) {
            movies.forEach(function( movie ) {
                $('#movieList').append('<tr><td>' + movie.title + '</td><td>' + movie.genre + '</td><td>' + movie.year + 
                '</td><td>' + movie.actors + '</td><td>' + movie.rating + '</td><td><button id=' + movie._id + 
                'onClick="{this.handleDelete.bind(this,id)}"' +'>Delete Title</button></td></tr>');
            })
        });
    }

    render() {
        return (   
            <div>     
                <input placeholder="Title" id="title" type="text" ref={(input) => { this.title = input; }}/>  
                <input placeholder="Genre" id="genre" type="text" ref={(input) => { this.genre = input; }}/> 
                <input placeholder="Year" id="year" type="text" ref={(input) => { this.year = input; }}/> 
                <input placeholder="Rober De Niro, Joe Pesci" id="actors" type="text" ref={(input) => { this.actors = input; }}/> 
                <input placeholder="Rating" id="rating" type="text" ref={(input) => { this.rating = input; }}/> 
                <button onClick={this.handleSubmit.bind(this)}>Add</button><br></br>
                <button onClick={this.handleGetMovies.bind(this)}>Show All Movies</button>

                <table id ="movieList" className="table table-striped">
                <tbody>
                    <tr>
                        <th>Title</th>
                        <th>Genre</th>
                        <th>Year</th>
                        <th>Actors</th>
                        <th>Rating</th>
                        <th>Actions</th>
                    </tr>
                </tbody>
                </table>

            </div>  
        )
    }
};

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

Answer 1

this.handleDeleteMovie可以在渲染函数JSX中工作，但是（我相信）你的问题是JSX在jquery方法中不起作用，你当前正在尝试使用特定于jsx的事件处理程序在jquery里面。（如果我错了，请有人编辑）

我建议在状态下设置来自get请求的电影：

在顶部：

constructor(){
    super();
    this.state = {}
}

然后在 ~~handleGetMovies()~~ 中更改为：componentDidMount
有关在componentDidMount

内执行AJAX的原因的详细信息，请参阅this question

$.get( "http://localhost:8080/api/movies", ( movies )=>{
//be sure to use the arrow function, so that the this binding will carry over
    this.setState({movies: movies})
}

最后，在渲染功能中，您可以包括：

<div>
/*other code and stuff*/
{this.state.movies.map((movie)=>{
    <div>
        /*elements for each movie, and your handledelete would work here*/
    </div>
    }
}
</div>

然后，为防止错误尝试映射尚不存在的数组，您有两种选择：
1）将constructor中的初始状态设置为this.state = { movies: [] }
OR （可能是更好的方式）
2）将您的jsx更改为{ this.state.movies && /*do your map here*/ }，即this.state.movies是否真实，然后执行以下代码。

在React中动态添加按钮以执行更新/删除请求

1 个答案: