Reactjs 如何将带有onClick的react元素（li）更改为删除线？

我一直试图在单击元素时将其设置为删除线，但不幸的是，我做不到，什么也没发生

var UserList = React.createClass({
    getInitialState: function() {
        return {
            user: [],
            firstName: '',
            lastName: '',
            createdAt: 0,
            isClicked: false,
        };
    },

handleOnClick: function() {
    var isClicked = this.state.isClicked;
    var style = {textDecoration: 'none'};
    if (isClicked === true) {
        style = {textDecoration: 'line-through'}
    }
 },

render: function() {

return (
    <div> 
        <Users user={this.state.user} onClick={this.handleOnClick}/>

    </div>
    );

var UserList=React.createClass({
getInitialState:函数（）{
返回{
用户：[]，
名字：''，
姓氏：“”，
createdAt:0，
isClicked:错，
};
},
单击：函数（）{
var isClicked=this.state.isClicked；
var style={textDecoration:'none'}；
如果（isClicked==真）{
style={textDecoration:'line through'}
}
},
render:function（）{
返回(
);

将“删除线”值存储在状态的标志中，并在

渲染

函数中执行

例如：

getInitialState: function () {
    return {
        ...
        isStrikeThrough: false,
        ...
    }
},

onHandleClick: function () {
    ....
    // toggle the strikethrough state
    this.setState({isStrikeThrough: !this.state.isStrikeThrough});
    ....
},

render: function () {
    return (
        <div>
            <User
                user={this.state.user}
                strikeThrough={this.state.isStrikeThrough}
                onClick={this.handleOnClick}
            />
        </div>
    );
},

getInitialState:函数（）{
返回{
...
isStrikeThrough:错，
...
}
},
onHandleClick:函数（）{
....
//切换删除线状态
this.setState（{isStrikeThrough:！this.state.isStrikeThrough}）；
....
},
渲染：函数（）{
返回(
);
},

您没有给出有关

用户

组件的任何详细信息，因此上面的解释仅基于我们在问题中的内容。也就是说，有几种方法可以改进这一点

首先，我假设您可以将删除线标志添加到

用户

组件中，并在那里呈现

..

（或类似的CSS样式）。这可能是真的，也可能不是真的（即，如果

用户

组件是第三方组件，则可能很难更改它）

其次，在我看来，上面描述的删除线状态应该是

User

组件的内部状态。如果您所做的只是基于单击

User

组件来更改

User

组件中的标记，那么删除线代码应该在

User

组件中更重要的是，如果删除线应该表示用户状态的一些重要信息，这些信息应该保存为用户状态的一部分，那么删除线标志应该是用户状态的一部分（并且具有比

isStrikeThrough

更具信息性的名称）。

您可以这样做： 与您的示例类似：

const TodoItem = ({item, checkHandler}) => {

  const itemCheckHandler = () => {
    checkHandler (item.id);
  };

  return (
    <div>
      <li
        style={{
          textDecoration: item.checked ? 'line-through' : 'none',
        }}
        onClick={itemCheckHandler}
      >
        {item.text}
      </li>
    </div>
  );
};

---

不要试图更改单击处理程序中的样式。用户执行操作时不应更改样式，而应在呈现操作时更改样式，这是正确的方法。

Dodek您可以看到上述答案，但我认为您需要更改查看和思考react应用程序的方式，这样在执行过程中会有很大帮助使用react进行编码。在我看来，您提供的代码类似于jQuery方法，当用户执行操作时，您可以直接修改DOM元素。即使您的方法没有问题，您的代码也不会将“行通过”样式应用于已检查的元素，除非用户单击某个项目，否则您可以从后端获取这些元素

您应该将组件视为电影中一个非常简单的演员，它接受一组非常小的参数（与真实的word相比），并根据此输入参数更改其在帧中的显示方式。例如，假设您有一个待办事项组件（如@Vennessa在此提供的组件）在一个简单的情况下，它只接受一个项目文本以及是否检查该项目

这些参数可能来自内部状态，也可能来自道具或任何其他资源，但最终您的组件接受这些参数，而所有确定组件外观的内部逻辑只能依赖这些参数并使用这些参数。

尝试一下：

function Item(props){

const [clicked, setIsClicked] = useState(false); 

function handleClick(){
  setIsClicked((prevValue) => {
    return (!prevValue)
  });
}

return <li style={{textDecoration: clicked ? "line-through": "none" }} onClick={handleClick}> 

{props.text} </li>
}

功能项（道具）{
const[clicked，setIsClicked]=useState（false）；
函数handleClick（）{
setIsClicked（（prevValue）=>{
返回（！prevValue）
});
}
return

{props.text}
}

Users组件的外观如何？一旦你在handleOnClick中设置了“样式”，它看起来就不会在任何地方使用“样式”。你需要设置一些状态或其他东西。你可以像这样做Dodek你可以看到答案，但我认为你需要改变你的外观和思考react应用程序的方式，然后它会在使用过程中对你有很大帮助r使用react进行编码。您提供的代码看起来像Jquery方法，当用户执行操作时，您可以直接修改DOM元素。即使您的方法没有问题，您的代码也不会对已选中的元素应用“行通过”样式，除非用户单击它们。

function Item(props){

const [clicked, setIsClicked] = useState(false); 

function handleClick(){
  setIsClicked((prevValue) => {
    return (!prevValue)
  });
}

return <li style={{textDecoration: clicked ? "line-through": "none" }} onClick={handleClick}> 

{props.text} </li>
}