Смешивание кода реакции с jQuery

Question

У меня есть эта таблица с флажком в каждой строке, чтобы пользователь мог выбирать строки. В начале таблицы у меня есть флажок, который должен включать/выключать или флажки в таблице.

Для этого я использую jQuery внутри метода componentDidMount, но у меня странное чувство, что я делаю что-то неправильно ..., которые сами реагируют на это, могут это сделать. Поскольку я только начинаю реагировать на обучение, мне нужно спросить вас, ребята, если я смогу сделать это немного более элегантно.

Вот мой код:

class Products extends Component 
{ 
    componentDidMount() 
    { 
     const dispatch = this.props.dispatch; 
     dispatch(asyncGetProducts()); 

     // NOT SURE ABOUT FOLLOWING PART 
     var self = this; 
     $('.proucts tbody tr').click(function() { 
      $(this).find('.checkbox').checkbox("toggle"); 
     }); 

     $('.proucts * .ui.checkbox').checkbox({ 
      onChecked: function(el) { 
       if($(this).attr('name') == "toggle_select_all") { 
        $('.proucts * .ui.checkbox').checkbox("set checked"); 
       } 
      }, 
      onUnchecked: function() { 
       if($(this).attr('name') == "toggle_select_all") { 
        $('.proucts * .ui.checkbox').checkbox("set unchecked"); 
       } 
      } 
     }); 
    } 

    // ...rest of code 
} 

Answer 1

Я чувствую, что вы делаете это неправильно. Вместо того, чтобы использовать jQuery для поиска всех элементов, вы должны использовать силу React. Если у вас есть список всех продуктов, то пройдите через каждый объект модели и установите для boolean значение true, которое должно отображаться как отмеченное поле. Это будет быстрее, чем использование jQuery.