在反应渲染 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 操作。我已经尝试过 onClick，现在尝试以下 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();
        });
 });

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

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>