React JS, изменение стиля элемента после поставленной галочки в checkbox

Рейтинг: 0Ответов: 1Опубликовано: 12.08.2023

Написал небольшой проект из нескольких компонентов, который по условию надо сделать с хуками. Здесь привожу только один компонент, который не могу доделать.

Есть таблица с четырьмя колонками: два поля, кнопка и чекбокс. Надо, чтобы при проставлении галочки в чекбоксе менялся стиль всей строки, например чтобы она меняла цвет. Понимаю, что для этого в <tr> надо поставить что-то типа

style={{color: isActive 'red' : 'black' }}

Но запутался.

Данные tasksData выглядят как

const tasksData = [
     { id: 1, description: 'qqqqq', city: 'NY'}, 
     { id: 2, description: 'wwwww', city: 'Paris'}, 
     { id: 3, description: 'rrrrr', city: 'Moscow'} 
   ]

Сам компонент:

const TaskTable = props => {
  const handleDeleteTask = id => {
    let answer = window.confirm('Are you sure?')
    if (answer) {
      props.deleteTask(id)
    }
  } 
  
  const [checkedState, setCheckedState] = useState(
    new Array(props.tasks.length).fill()
  );
  

  const handleOnChange = (position)  => {
      const updatedCheckedState = checkedState.map((item, id) =>
          id === position  ? !item : item
      ); 
  }
      
  
  return (
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>City</th>
        <th>Delete</th>
        <th>Done</th>
      </tr>
    </thead>
    <tbody>
      {props.tasks.length > 0 ? (
        props.tasks.map(task => (
          <tr key={task.id}>
            <td>{task.description }</td>
            <td>{task.city}</td>
            <td>
              <button type="button"
              className="button muted-button"
              onClick={() => handleDeleteTask(task.id)}
              >
              Delete</button>
            </td>
            <td>
               <input 
               type="checkbox" 
               checked={checkedState[task.id]}
               onChange={() => handleOnChange(task.id)}
               />
            </td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={4}>No tasks more</td>
        </tr>
      )}
    </tbody>
  </table>
)}



export { TaskTable };
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

У вас не сохраняются изменения при выборе чекбоксов.

Сохраните вашу таблицу в состоянии компонента и меняйте ей значения при клике по чекбоксу.

Так же, я добавил в "таблицу" свойство checked для более удобного определения выбранного столбца

import React, { useState } from "react";

const TaskTable = props => {
  const [table, setTable] = useState(() => props.tasks.map(item => {
    item.checked = false;
    return item;
  }));
  
  const handleDeleteTask = id => {
    let answer = window.confirm('Are you sure?')
    if (answer) {
      props.deleteTask(id)
    }
  }

  const handleOnChange = (position)  => {
    const tab = table.map(it => {
      if (it.id === position) {
        it.checked = !it.checked;
      }
      return it;
    });
    setTable(tab);
  }

  return (
    <table>
      <thead>
      <tr>
        <th>Description</th>
        <th>City</th>
        <th>Delete</th>
        <th>Done</th>
      </tr>
      </thead>
      <tbody>
      {table.length ? (
        table.map(task => (
          <tr key={task.id} style={{backgroundColor: task.checked ? 'aqua' : 'white'}}>
            <td>{task.description }</td>
            <td>{task.city}</td>
            <td>
              <button type="button"
                      className="button muted-button"
                      onClick={() => handleDeleteTask(task.id)}
              >
                Delete</button>
            </td>
            <td>
              <input
                type="checkbox"
                checked={task.checked}
                onChange={() => handleOnChange(task.id)}
              />
            </td>
          </tr>
        ))
      ) : (
        <tr>
          <td colSpan={4}>No tasks more</td>
        </tr>
      )}
      </tbody>
    </table>
  )
}

export { TaskTable };