reactjs - 如何将带有onClick的 react 元素(li)更改为删除线？

Question

我一直在尝试将元素设置为单击时变为删除线，但不幸的是我做不到，没有任何反应。

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>
    );

Answer 1

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

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>
  );
};

和状态所在的 App.js 中的 checkHandler 是这样的(items 是项目数组):

  checkHandler = id => {
    this.setState ({
      items: this.state.items.map (item => {
        if (item.id === id) {
          item.checked = !item.checked;
        }
        return item;
      }),
    });
  };

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