React JS：onClick 不工作；无法使用 onClick 放置 "line-through" 显示 属性

Question

为什么我的段落 'line-through' 不显示？我很确定我在这里遗漏了一些重要的东西，这是我目前唯一的反应知识，所以请帮助我获得一个想法逻辑。我为我对这个简单问题的无知表示歉意。

const [strike, isStrike] = React.useState(false);

我这里设置了strike state为true； （我说得对吗？）

const done = () => {
   isStrike(strike);
};

const s = {
  textDecoration: isDone ? "line-through" : "none",
};

我通过 {strike && isDone} 设置了 isDone prop 和 strike var，并将 done 函数调用到 onClick 中。

return (
    <div className="container-item" style={s} >
      <p> {title} </p>
      {strike && isDone}
      <button onClick={done} > Done</button>
    </div>
  );

Answer 1

冠军，请继续尝试此代码。

const [textDecorationType, setTextDecorationType] = React.useState(false);
return (
<div className="container-item">
<p className={`text-decoration:${textDecorationType ? 'line-through' :''}`}> 
{title}</p>
<button onClick={() => setTextDecorationType(!textDecorationType)}>
Done</button></div>);

Answer 2

首先你在哪里定义isDone？而且您的代码中有很多错误。而且您不能将 {strike && isDone} 声明为 child。它会抛出错误。下面是工作代码。

而且，我认为 isStrike 仍然按照您定义 done 函数的方式得到初始错误。为什么不直接制作 isStrike(!strike)。希望这能解决问题。

const [strike, isStrike] = useState(false);
const done = () => {
   isStrike(!strike)
}
const s = {
   textDecoration: strike ? "line-through" : "none",
};
return (
  <div className="container-item" style={s} >
    <p> Hello, Title </p>
    <button onClick={done} > Done</button>
  </div>
);