javascript - 如何在 React 中动态更改组件的 className？

Question

我想做一个按钮检查，将新的 calssName 添加到我的列表中。我使用一个函数来更新状态并获取字符串。如果你想帮助我更具体，因为我是初学者。谢谢 ！

const [check, setCheck] = useState({
  id: '',
  status: false
});

这就是功能。使用“on”，我将字符串添加到 id。

let complet = (on) =>{
  if(check.status == false){
    setCheck({
      id: on,
      status: true
    })
  }
  else {
    setCheck({   
      id: on,
      status: false
    })
  }
}

以及我如何显示列表以及我如何检查对应的字符串。

return(
    <div className='display'>
    { list.map( (list,index) => (
        <div className={ check.status && check.id == list  ? 'lista complet' : 'lista'} key= {index} id='lista' >
            {list}
            <button className='btnCheck' onClick={complet.bind(this, list)}> <FcCheckmark/> </button>
            <button className='btnRemove' onClick={remove.bind(null, list)}> <BsTrash/> </button>
        </div>
    ))}
    </div>
)

标签： javascriptcssreactjs

Answer 1

如果要存储选中的 id 和未选中的 id，则必须更改状态变量，因为目前它只能存储单个元素。但是，您似乎正在呈现可以单独检查的元素列表

这是一个可能的解决方案：

function App({list}) {
  const [checkIds, setCheckIds] = useState(() => { 
    const item = localStorage.getItem('checkIds');
    return item ? JSON.parse(item) : {};
  });

  // reset the checkIds when the list is updated
  useEffect(() => setCheckIds({}), [list]);

  // save the checkIds into the local storage
  useEffect(() => {
    localStorage.setItem('checkIds', JSON.stringify(checkIds));
  }, [checkIds]);

  function checkId(id) {
    setCheckIds({...checkIds, [id]: true);
  }

  function uncheckId(id) {
    setCheckIds({...checkIds, [id]: false);
  }

  return (
    <div className='display'>
      {list.map(id => (
        <div key={id} id={id} className={check[id] ? 'lista complet' : 'lista'}>
            {id}
            <button className='btnCheck' onClick={() => checkId(id)}> 
              <FcCheckmark/> 
            </button>
            <button className='btnRemove' onClick={() => uncheckId(id)}> 
              <BsTrash/>
            </button>
        </div>
    ))}
    </div>
  )
}