Как добавить значения флажков в массив setState в reactJS - PullRequest
Новая
       56

Как добавить значения флажков в массив setState в reactJS

0 голосов
/ 14 июля 2020

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

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


    const [checkList, setCheckList] = useState([]);
    
    const handleChange = e => {
        setCheckList([...checkList, e]);
        setChecked(prev => !prev);
        console.log(checkList);
      };



    <List>
          {someList.map(w => (
            <ListItem key={w.id}>
              <ListItemIcon>
                <ReactSVG
                  style={{ height: '35px', width: '35px' }}
                  src={w.logo}
                />
              </ListItemIcon>
              <ListItemText primary={w.name} />
              <ListItemSecondaryAction>
                <Checkbox
                  edge="end"
                  onChange={e => handleChange(e.target.value)}
                  value={w.id}
                  // checked={checked}
                />
              </ListItemSecondaryAction>
            </ListItem>
          ))}
        </List>

1 Ответ

0 голосов
/ 14 июля 2020

Проверено должно определяться на основе элементов checkList. и handleChange должен обновлять состояние в зависимости от установленного значения флажка. Проверьте мое решение. 

export default function App() {
  const [checkList, setCheckList] = useState([]);

  const workspaces = [
    {
      id: 1,
      name: "hello"
    },
    {
      id: 2,
      name: "hello2"
    }
  ];
  const handleChange = e => {

    if (e.target.checked === true) {
      setCheckList([...checkList, Number(e.target.value)]);
    } else {
      const selectedAcc = checkList.filter(a => {
        if (a === Number(e.target.value)) return false;
        return true;
      });
      setCheckList([...selectedAcc]);
    }
  };

  return (
    <div className="App">
      <List>
        {workspaces.map(w => (
          <ListItem key={w.id}>
            <ListItemText primary={w.id} />
            <ListItemSecondaryAction>
              <Checkbox
                edge="end"
                onChange={e => handleChange(e)}
                value={w.id}
                checked={
                  checkList.lastIndexOf(Number(w.id)) >= 0 ? true : false
                }
              />
            </ListItemSecondaryAction>
          </ListItem>
        ))}
      </List>
    </div>
  );
}
...