在react render HTML上执行任何操作事件

Question

我正在react JS中呈现Html，即：

return (
                                <div>
                                 <table id="displaydata">

                                          <td className="update_record"><a href={"http://localhost/PHP-React-Demo/update_record.html?id=" + d.id}><img className="edit" src="http://localhost/PHP-React-Demo/images/edit_logo1.png"/></a></td>
                                          <td className="delete_record"><input id="closeAuction" type="image" className="delete" src="http://localhost/PHP-React-Demo/images/delete-button.png"/></td>
                                          </tr>
                                          )}
                                  )}
                               </table>
    </div>
    )

现在我想点击图像执行JQuery操作。我已经尝试了onhtml，现在尝试以下JQuery代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        $(document).ready(function() {     
            $('#closeAuction').click(function() {
                location.reload();     
            });    
        });
    </script>

这是JQuery代码，但它没有显示任何内容。只有html呈现该操作未执行。

Answer 1

把你的代码改成这个-

 $(document).ready(function() {     
        $(document).on('click', '#closeAuction', function() {
            location.reload();
        });
 });

但理想情况下，你应该不再需要jQuery与React。

Answer 2

而不是这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    $(document).ready(function() {     
        $('#closeAuction').click(function() {
            location.reload();     
        });    
    });
</script>

试试这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
    $(document).ready(function() {     
        $('#closeAuction').click(function() {
            location.reload();     
        });    
    });
</script>