如何使用Material-UI中的Checkbox在待办事项列表项上切换删除线

Question

const Todo: React.FC<ITodoProps> = (props) => {
const [textInput, setTextInput] = useState('');

const {
 addTodo,
 userId,
 todosForUser,
 user,
} = props;
if (user == null) {
 return (
  <Grid
    container={true}
    direction='column'
    wrap='nowrap'
  >
    <Grid
      item={true}
    >
      <Typography
        variant='h5'
      >
        INVALID USER
      </Typography>
    </Grid>
  </Grid>
);
}
return (
 <Grid
  container={true}
  direction='column'
  wrap='nowrap'
 >
  <Grid
    item={true}
  >
    <Typography
      variant='h5'
    >
      TODOS FOR {user.get('name')}
    </Typography>
  </Grid>
  <Grid
    container={true}
    item={true}
    direction='column'
    wrap='nowrap'
  >
    <Grid
      item={true}
      container={true}
      alignItems='center'
    >
      <Grid
        item={true}
      >
        <TextField
          label='title'
          value={textInput}
          onChange={(e) => {
            setTextInput(e.target.value);
          }}
        />
      </Grid>
      <Grid
        item={true}
      >
        <Button
          variant='outlined'
          onClick={
            () => {
              addTodo(
                userId,
                TodoFactory({
                  title: textInput,
                }),
              );
              setTextInput('');
            }
          }
        >
          Add Todo
        </Button>
      </Grid>
    </Grid>
    {
      todosForUser.map((todo, index) => {
        return <Grid
          key={index}
          item={true}
        >

这里是复选框

        <Checkbox>

        </Checkbox>

这里是目标待办事项列表

          {todo.get('title')}




        </Grid>;
      })
    }
  </Grid>
</Grid>
);
}

我正在使用material-UI，打字稿，react，redux，saga和immutablejs。

[基本上，这是一个待办事项列表，当切换时，我在如何对列表项进行直通方面苦苦挣扎。

这是它的外观When checkedWhen unchecked

我无法理解如何在此堆栈上将Checkbox与onClick一起使用。非常感谢您的帮助。

谢谢。

Answer 1

[当我试图将项目标记为已删除（删除线效果）时，我在列表中使用了<del>标签。

示例：

<ListItem key={"occasion-list-item-" + occasion.Id} button onClick={() => handleToggle(occasion)}>
  { occasion.Enabled ? 
    (
      <ListItemText id={occasion.Id} primary={JSON.stringify(occasion.Enabled)} />
    )
    :
    (
      <del>
      <ListItemText id={occasion.Id} primary={JSON.stringify(occasion.Enabled)} />
      </del>
    )
  }
</ListItem>

场合是像这样的POJO：

{
  "Id" : <some sort of string guid>,
  "Enabled" : true
}

您将拥有一个处理程序，该处理程序将在组件状态下更新该项目中的Enabled值，然后作出反应将重新呈现您的页面。重新呈现页面时，Enabled为true，因此选择第一个代码路径。