1

Пишу приложение на React, которое-по API принимает данные для таблицы и выводит их. Среди прочего функционала, в заглавных ячейках колонок(столбцов ) должна быть кнопка для удаления этого самого столбца.

Столкнулся со следующей проблемой: событие onClick не срабатывает внутри ячейки, но срабатывает вне таблицы. Что делаю не так, и как заставить кнопку внутри th - отзываться ?

import React from 'react';
import './App.css';

function App() {

  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    fetch('https://example.com/')
      .then((resp) => resp.json())
      .then(json => {
        setItems(json.data)
      })
  }, []);

  const addItem = () => {
    let list = document.querySelector('.items')

    let key;

    for (key in items) {
      list.innerHTML += `
        <tr>
          <td>${items[key].id}</td>
          <td>${items[key].year}</td>
        </tr>
        `
    }
  }

  addItem();

  const del = () => {
    console.log('test')
  }

  return (
    <div className="mainContainer">

      <span className="tableHeader">
        <h1 onClick={del}>Pantone Colors</h1>
        //Эта кнопка работает правильно

        <p>Reset</p>
      </span>
      <table className="table">
        <tbody className='items'>
          <tr >
            <th><input type="checkbox" defaultChecked />id</th>
            <th><input type="checkbox" defaultChecked />year <button onClick={del}>Delete</button> </th>
            //Эта кнопка не работает

          </tr>
        </tbody>
      </table>
    </div >
  );
}

export default App;
4
  • возможно, Вы свой нерабочий <button> как-то скрыли от событий стилями (типа z-index: -1 или pointer-events: none). попробуйте вместо onClick поставить onMouseOver на нерабочий <button> и скажите результат 3 сен 2020 в 5:39
  • Спасибо за ответ. К сожалению, это не помогло, но Я понял, что проблема скорее всего из-за функции getResponse (Я обновил текст моего вопроса, и добавил туда код этой функции). Если закомментировать эту функцию - onClick и другие события отрабатывают должным образом. Осталось понять, как это решить
    – Miltosh
    3 сен 2020 в 5:54
  • ага. значит, если закомментировать вызов функции getResponce(), то onClick нормально работает на нерабочем <button>? 3 сен 2020 в 6:20
  • Да, сейчас переписал запрос через useEffect, но ситуация не изменилась, кнопка не реагирует. Обновил код
    – Miltosh
    3 сен 2020 в 6:55

1 ответ 1

0

теоретически, проблема из-за innerHTML. innerHTML не надо использовать в React. я бы даже сказал, что это противопоказано


import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [tableItems, setTableItems] = useState([]); // контент всех ячеек выносим в state

  useEffect(() => {
    (async () => {
      let response = await fetch('https://example.com/');
      let content = await response.json();
      setTableItems([...tableItems, ...content]); // когда получили ответ из запроса, записываем его в state
    })();
  }, []);

  const del = () => console.log('test');

  return (
    <div className="mainContainer">
      <span className="tableHeader">
        <h1 onClick={del}>Pantone Colors</h1>
        <p>Reset</p>
      </span>
      <table className="table">
        <tbody className='items'>
          <tr >
            <th><input type="checkbox" defaultChecked />id</th>
            <th><input type="checkbox" defaultChecked />name</th>
            <th onClick={del}><input type="checkbox" defaultChecked />year </th>
          </tr>
          {
            !!tableItems.length && // проверяем есть ли хоть что-то в tableItems
            tableItems.map(item => ( // если есть, то перебираем весь массив и отрисовываем каждую ячейку. но лучше какждую ячейку вынести как отдельный компонент
              <tr key={item.id}>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.year}</td>
                <td>
                  <div className="itemColor" style="
                    width: 10px;
                    height: 10px;
                    border-radius: 3px;
                    background-color: ${content.data[key].color};
                    display: inline-flex;">
                  </div> 
                  ${item.color}
                </td>
                <td>${item.pantone_value}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    </div >
  );
}

export default App;
7
  • @Miltoch, проверьте и дайте знать на результат работоспособности, так как мой ответ только в теории рабочий 3 сен 2020 в 7:16
  • Спасибо вам за ответ, но код выдаёт ошибку, из-за await вне асинхронной функции
    – Miltosh
    3 сен 2020 в 8:15
  • @Miltosh, да, Вы метко подметили (то есть, Ваш компилятор). изменил свой ответ. пожалуйста, протестируйте заново 3 сен 2020 в 8:33
  • Теперь работает, всё подгружается, клик срабатывает, но компилируется с одним предупреждением, а именно: " React Hook useEffect has a missing dependency: 'tableItems'. Either include it or remove the dependency array. You can also do a functional update 'setTableItems(t => ...)' if you only need 'tableItems' in the 'setTableItems' call react-hooks/exhaustive-deps" Если убрать пустой массив в конце useEffect - ошибка исчезает, но загружаемые элементы подгружаются бесконечно, подскажите пожалуйста, как исправить
    – Miltosh
    3 сен 2020 в 9:02
  • @Miltosh, хм, видимо, Вы как-то изменили мой код или дописали своего. в предупреждении говориться, что внутри useEffect лучше не использовать функции, который объявлены вне метода useEffect. более детальнее здесь или здесь 3 сен 2020 в 10:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.