反应中的条件样式答案

【问题标题】：Conditional Styles in react反应中的条件样式
【发布时间】：2022-11-05 01:48:27
【问题描述】：

我正在制作一个待办事项列表，在下面的Tasks 组件中，我有一个带有映射数据的li 组件。我想有条件地在使用useState 钩子的任务上添加删除线，其初始属性为null。

然后我添加了onClick 函数以将状态分别更改为true 和false，但我的风格没有被应用:(

下面是相同的代码

import React, {useState} from 'react';
import "./Tasks.css";
import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close';

function Tasks(props) {

  const [done, setDone] = useState(null);

  return (
    <div className="tasks">
        {props.items.map(item => (
          <li key={item.id} onClick={() => setDone(false)} style={{textDecorationLine: done && 'line-through'}}>{item.text} 
            <div>
              <button onClick={() => setDone(true)} style={{color: "green"}}><DoneIcon/></button>
              <button style={{color: "red"}}><CloseIcon/></button>
            </div>
          </li>
        ))}
    </div>
  )
}

export default Tasks;

【问题讨论】：

标签： reactjs

【解决方案1】：

您的代码有几个问题：

如果要保存每个任务的状态，则不能使用单个布尔值。您需要每个任务拥有一个值的数组或对象。

当您单击完成按钮时，两个onClick 回调都会被触发（一个用于<button> 和一个用于<li>），将done 的值设置为true 并立即设置为false再次。

要解决 [1]，您可以将 done 变量设为对象，其中每个键是项目 ID，匹配值是确定任务是否完成的布尔值。

要解决 [2]，请从 <li> 中删除 onClick。如果您在按钮的onClick 中根据之前的状态设置任务状态，您仍然可以实现切换效果。

以下代码应该是您需要的：

  // done is an object that maps task ids to booleans
  const [done, setDone] = useState({});

  return (
    <div className="tasks">
      {props.items.map(item => (
        <li key={item.id} style={{textDecorationLine: done[item.id] && 'line-through'}}>{item.text} 
          <div>
            <button onClick={() => setDone(prevState => ({...prevState, [item.id]: !prevState[item.id]}))} style={{color: "green"}}><DoneIcon/></button>
            <button style={{color: "red"}}><CloseIcon/></button>
          </div>
        </li>
      ))}
    </div>
  )

【讨论】：

知道了。谢谢！

【解决方案2】：

您需要保存 item.id 以确定单击了哪个项目，而不是布尔值。

import React, {useState} from 'react';
import "./Tasks.css";
import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close';

function Tasks(props) {

  const [taskWasDone, setTaskWasDone] = useState(null);

  return (
    <div className="tasks">
        {props.items.map(item => (
          <li key={item.id} onClick={() => setTaskWasDone(null)} style={{textDecorationLine: taskWasDone === item.id && 'line-through'}}>{item.text} 
          <div>
            <button onClick={() => setTaskWasDone(item.id)} style={{color: "green"}}><DoneIcon/></button>
            <button style={{color: "red"}}><CloseIcon/></button>
          </div>
      </li>
        ))}
        
    </div>
  )
}

export default Tasks;

【讨论】：