reactjs - 如何使用 Material-UI 中的复选框在待办事项列表项上切换删除线
问题描述
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。
基本上,它是一个待办事项列表,当切换它时,我正在努力解决如何在列表项上进行换行。
我无法理解如何将 Checkbox 与 onClick 与此堆栈一起使用。非常感谢您的帮助。
谢谢你。
解决方案
当我试图将项目标记为已删除(删除线效果)时,我<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
会选择第一个代码路径。
推荐阅读
- pine-script - 如何仅绘制今天?
- javascript - 发送 Ajax 请求以将 Post 数据从一个 Url 发送到另一个 Url 而不会出现 CROS 错误
- php - 如何使用 php 从网站中仅提取文本数据?
- azure - 是否可以轻松地从 windows 迁移到 linux Azure App Service?
- jsf - JSF 页面导航中的下一页上未填充数据
- c# - 在 Linq 中查询静态类型
- .net - WinSCP 等待 WinSCP 响应超时
- sql - “C:\DBs\BlogAppDB.mdf”指定的路径不在有效目录中
- reactjs - React.js 页面不切换
- java - 使用 Jenkins 将二进制文件与 JAR 文件一起发布到 Maven 工件