Hướng dẫn dangerouslysetinnerhtml onclick - nguy hiểmsetinnerhtml onclick

Hãy cẩn thận: Điều này nghe có vẻ như là một vấn đề x/y, trong đó vấn đề tiềm ẩn (bất kể nó là gì) nên được giải quyết khác nhau, để bạn không phải thêm một trình xử lý nhấp chuột vào một phần tử DOM được tạo thông qua dangerouslySetInnerHTML (lý tưởng nhất là bạn không 'T phải tạo các thành phần DOM thông qua dangerouslySetInnerHTML ở tất cả). Nhưng trả lời câu hỏi bạn đã hỏi: (Bạn đã làm rõ trường hợp sử dụng; Giải pháp số 1 bên dưới áp dụng và không thực hành kém.) This sounds like an X/Y problem, where the underlying problem (whatever it is) should be solved differently, so that you don't have to add a click handler to a DOM element created via dangerouslySetInnerHTML (ideally, so you don't have to create DOM elements via dangerouslySetInnerHTML at all). But answering the question you asked: (You've clarified the use case; solution #1 below applies and isn't poor practice.)

Tôi không nghĩ bạn có thể làm điều đó trực tiếp. Hai giải pháp tôi có thể nghĩ đến:

1. Sử dụng Trình xử lý sự kiện được ủy quyền trên div: Thêm một trình xử lý nhấp chuột trên div, nhưng sau đó chỉ thực hiện hành động nếu nhấp chuột được chuyển qua phần tử b.

2. Sử dụng ref trên div, sau đó nối trình xử lý nhấp chuột vào

   clickHandler(e) {
       // `target` is the element the click was on (the div we hooked or an element
       // with in it), `currentTarget` is the div we hooked the event on
       const el = e.target.closest("B");
       if (el && e.currentTarget.contains(el)) {
           // ...do your state change...
       }
   }
   

   1 và

   clickHandler(e) {
       // `target` is the element the click was on (the div we hooked or an element
       // with in it), `currentTarget` is the div we hooked the event on
       const el = e.target.closest("B");
       if (el && e.currentTarget.contains(el)) {
           // ...do your state change...
       }
   }
   

   2 (tìm phần tử b trong div qua

   clickHandler(e) {
       // `target` is the element the click was on (the div we hooked or an element
       // with in it), `currentTarget` is the div we hooked the event on
       const el = e.target.closest("B");
       if (el && e.currentTarget.contains(el)) {
           // ...do your state change...
       }
   }
   

   5 hoặc tương tự), một cái gì đó dọc theo các dòng sau:

Đây là một ví dụ về #1:

<div onClick={this.clickHandler} dangerouslySetInnerHTML={this.createMarkup(string)}/>

...

clickHandler(e) {
    // `target` is the element the click was on (the div we hooked or an element
    // with in it), `currentTarget` is the div we hooked the event on
    const el = e.target.closest("B");
    if (el && e.currentTarget.contains(el)) {
        // ...do your state change...
    }
}

clickHandler(e) {
    // `target` is the element the click was on (the div we hooked or an element
    // with in it), `currentTarget` is the div we hooked the event on
    const el = e.target.closest("B");
    if (el && e.currentTarget.contains(el)) {
        // ...do your state change...
    }
}

... Hoặc nếu bạn cần hỗ trợ các trình duyệt cũ hơn mà không cần

clickHandler(e) {
    // `target` is the element the click was on (the div we hooked or an element
    // with in it), `currentTarget` is the div we hooked the event on
    const el = e.target.closest("B");
    if (el && e.currentTarget.contains(el)) {
        // ...do your state change...
    }
}

clickHandler(e) {
    // `target` is the element the click was on (the div we hooked or an element
    // with in it), `currentTarget` is the div we hooked the event on
    let el = e.target;
    while (el && el !== e.currentTarget && el.tagName !== "B") {
        el = el.parentNode;
    }
    if (el && el.tagName === "B") {
        // ...do your state change...
    }
}

... và nơi bạn liên kết

clickHandler(e) {
    // `target` is the element the click was on (the div we hooked or an element
    // with in it), `currentTarget` is the div we hooked the event on
    const el = e.target.closest("B");
    if (el && e.currentTarget.contains(el)) {
        // ...do your state change...
    }
}

this.clickHandler = this.clickHandler.bind(this);

Ví dụ trực tiếp:

Dưới đây là một ví dụ về #2, nhưng đừng làm điều này nếu a) bạn có thể giải quyết vấn đề cơ bản một cách riêng biệt hoặc b) #1 hoạt động:

REFS là một "hatch thoát ra" cho bạn quyền truy cập trực tiếp của DOM. Đừng sử dụng LEFS một cách nhẹ nhàng; Thông thường, có một lựa chọn tốt hơn.

Nhưng một lần nữa: Tôi sẽ giải quyết vấn đề cơ bản, bất kể đó là gì, khác đi. I would solve the underlying problem, whatever it is, differently.

Hướng dẫn dùng listerns JavaScript

Trong bài hướng dẫn tự học lập trình này, bạn sẽ tìm hiểu về DOM Event Listener trong JavaScript.Nội dung chính2. Event Listeners là gì?2. Thêm các kiểu Event Listener ...

Hướng dẫn set href javascript

An element is invalid HTML unless it has either an href or name attribute.Nội dung chínhDefinition and UsageBrowser SupportAttribute ValuesMore ExamplesDefinition and ...

Hướng dẫn onclick trong html w3schools

ExampleExecute a JavaScript when a button is clicked:Click me Try it Yourself »Definition and UsageThe onclick event occurs when the user clicks ...

Hướng dẫn sanitize html react

This is slightly modified version of sanitize-html made for React. It no longer escapes the < > & characters because React already escapes for you as described here. The following is the ...

Sự kiện select trong javascript

Thông thường ta hay sử dụng Javascript để bắt sự kiện onchange của thẻ select. Sự kiện onchange là sự kiện khi bạn thay đổi lựa chọn của select box. Ví dụ ...

Hướng dẫn onclick function in php

Here´s an alternative with AJAX but no jQuery, just regular JavaScript:Add this to first/main php page, where you want to call the action from, but change it from a potential a tag (hyperlink) to a ...

Hướng dẫn dangerouslysetinnerhtml

Im currently having a React Component like this:

Click button with python requests

I have this little website i want to fill in a form with the requests library. The problem is i cant get to the next site when filling the form data and hitting the button(Enter does not work).The ...

Hướng dẫn dùng propertis JavaScript

Trong bài viết này, mình sẽ giúp bạn có cái nhìn chi tiết hơn về object properties và các attributes của nó như là configurable, enumerable, writable, get, set và ...

Hướng dẫn dùng invokefunction JavaScript

JavaScript seriesChương hôm nay giới thiệu về function trong JavaScript, thứ tưởng đơn giản nhưng không đơn giản tí nào.Bài viết này là một phần của series ...