如何使用 Material-UI 中的复选框在待办事项列表项上切换删除线答案

【问题标题】：How to use Checkbox from material-UI to toggle strikethrough on a todo list item如何使用 Material-UI 中的复选框在待办事项列表项上切换删除线
【发布时间】：2019-11-20 15:43:36
【问题描述】：

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、typescript、react、redux、saga、immutablejs。

基本上，这是一个待办事项列表，我正在努力解决如何在切换时对列表项进行换行。

这是它的外观 When checked When unchecked

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

谢谢。

【问题讨论】：

标签： reactjs typescript material-ui redux-saga immutable.js

【解决方案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，然后 react 将重新呈现您的页面。当它重新渲染页面时，Enabled 是true 所以选择第一个代码路径。

【讨论】：