Есть ли способ вызвать компонентный метод при нажатии на элемент "не реагировать" DOM

Question

Вот сценарий. Я создал таблицы, используя jQuery Datable плагин . В последнем столбце есть кнопка (элемент не реагирует HTML) для всех строк. Поскольку весь HTML-код для таблицы создается плагином автоматически, мы не можем использовать компонент JSX для кнопки и, следовательно, не можем использовать onClick реагирующий прослушиватель.

Вот что я сейчас делаю:

В моем обычном файле сценария (без реакции):

$(document).on("click", ".my-button", function(){
   //show a popup and add content in it using ajax
});

Вот что я хочу сделать в коде реагирования (т. Е. В классе основных компонентов)

class LoginForm extends  React.Component {
    constructor(props) {
        super(props);
    }

    //following method is to be called on onClick
    showAPopupAndAddContentAjax() {
      //code
    }

    //other stuff
}

Так есть ли способ вызвать любой метод реагирующего слушателя? Или есть другой подход для достижения этой цели?

PS: я просто не могу сейчас удалить код с данными, поскольку он уже написан и не может быть заменен прямо сейчас. Просто нужны такие слушатели как onClick

Answer 1

Не рекомендуется использовать фреймворки, использующие виртуальный DOM (React), с фреймворками, использующими физический DOM (jQuery).

Однако мы можем рендерить React только в части приложения, что позволяет избежать большого риска между использованием как физического, так и виртуального DOM.

Я думаю, что-то подобное может подойти для вашего варианта использования.

HTML

<button class="my-button">Render Component</button>
<div id="root"></div>

Javascript:

class App extends React.Component {
  static getDerivedStateFromProps(props, state) {
    // load data with ajax
  }

  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>This is a react component</p>
      </div>
    );
  }
}

function renderReact() {
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  );
}

$(document).on('click', '.my-button', function() {
  renderReact();
});

Вы можете видеть, как это работает в этом коде.

Answer 2

Обычно вы не можете этого сделать. Потому что React работает над концепцией виртуального домена, и вы хотите взаимодействовать с основным доменом.

Хитрый способ сделать это - добавить класс и вызвать всплывающее окно:

$(document).on("click", ".my-button", function(){
   $('#your_instance_of_component').addClass('open-popup');
});

// in your react app
const openPopup = ReactDOM.findDOMNode(LoginForm)
                  .getElementsByClassName('open-popup')//[0]

// implement the logic
if(openPopup.length) {
 // do the stuff
}

Надеюсь, это поможет!

---

Обновление

Я только что получил другую идею, которая будет работать нормально:

В слушателе jQuery добавьте параметр запроса. А в приложении «Реакция» вы можете вызвать DOM-слушателя при смене маршрута. Вы должны приложить усилия для этого с некоторыми исследованиями. Надеюсь, это поможет сейчас!

Answer 3

Установите прослушиватель событий, который React прослушивает, и обновите состояние на основе этого. Этот фрагмент кода должен дать вам общее представление.

$(document).on("click", ".my-button", function() {
  //show a popup and add content in it using ajax
  $(document).trigger( "show-my-react-popup" );
});

class Popup extends React.Component {
  state = { open: false };

  showAPopupAndAddContentAjax = () => {
    this.setState({ open: true });
  };

  closePopup = () => {
    this.setState({ open: false });
  };

  componentDidMount() {
    // jQuery code, should be refactored and removed in the future
    $(document).on("show-my-react-popup", () => {
      this.showAPopupAndAddContentAjax();
    });
  }

  componentWillUnmount() {
    // jQuery code, should be refactored and removed in the future
    $(document).off("show-my-react-popup");
  }

  render() {
    if (!this.state.open) return null;

    return (
      <div className="popup">
        <p>popup</p>
        <button onClick={this.closePopup}>close</button>
      </div>
    );
  }
}

Answer 4

onmousedown onmouseup

Источник - HTML DOM Events

Есть и альтернативные способы, если использовать jQuery:

$('#SomeButton').click(function() { 
   functionTOevent();
});

* Используйте ту же идею, что и эта, чтобы получить что-то в реакции.