Блог

Как выбрать и отменить выбор div, который генерируется с помощью функции map.

Как я могу сохранить индекс и его значение при нажатии на div и в то же время, когда я отменяю выбор этого div, удалить этот индекс div и значение из переменной useState work

Я пытался сделать таким образом

 const data = [
  {
    Key: 1,
    value: "four"
  },
  {
    Key: 2,
    value: "fours"
  },
]



export default function App() {

  const [work , setWork] = React.useState()

  const handleSelect = (value , idx) => {
    setWork(prev => {
      const index = prev.findIndex(item => item.key === idx);
      if(index< 0) return [...prev, { idx, value}];
    })
  }

  return (

    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {
        data.map((da , idx) => (
          <div onClick = {handleSelect(da.value , idx)} >{da.value}</div>
        ))
      }
      
    </div>
  );
}
  

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

 const data = [
  {
    key: 1,
    value: "four"
  },
  {
    key: 2,
    value: "fours"
  }
];

export default function App() {
  const [items, setItems] = React.useState(
    data.map((item) => {
      return { ...item, selected: false };
    })
  );
  const [work, setWork] = React.useState([]);

  const handleSelect = (value) => {
    const nextItems = items.map((item) => {
      if (item.value === value) {
        return {
          ...item,
          selected: !item.selected
        };
      }
      return item;
    });
    const nextWork = nextItems
      .filter((item) => item.selected)
      .map((item) => item.value);

    setWork(nextWork);
    setItems(nextItems);
  };
  return (
    <div className="App">
      {items.map((da) => (
        <div key={da.key} onClick={() => handleSelect(da.value)}>
          {da.value}
        </div>
      ))}
      <p>Items: {JSON.stringify(items)}</p>
      <p>Selected: {JSON.stringify(work)}</p>
    </div>
  );
}
  

Вот пример:

• CodeSandbox

Используйте событие click, чтобы получить элемент, на который нажат. Также вы можете хранить любые детали внутри элемента в качестве пользовательского атрибута. Тогда может быть очень полезно использовать атрибуты данных, которые доступны в element.dataset.

 const data = [
  {
    Key: 1,
    value: "four"
  },
  {
    Key: 2,
    value: "fours"
  },
]

function App() {
  const [work , setWork] = React.useState()
  // *e* stands for event here, e.target is an clicked element itself. Now you can use it to pick up the element by and its properties: 
  const handleSelect = e => {
    console.log(e.target.dataset.key) 
    // dataset.key is available thanks to data-key attribute of the element
    // this way you can get any of needed data from element and then use it to set new work state
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {
        data.map((da , idx) => (
          <div onClick = {handleSelect} data-key={da.Key} >{da.value}</div>
        ))
      }
      
    </div>
  );
}