时间戳

首页 > 解决方案 > 显示不需要表单的显示页面的复选框项目

javascript - 显示不需要表单的显示页面的复选框项目

问题描述

我想为我的 React-Redux 应用程序中的显示页面显示一个不可点击的复选框。因此，我熟悉构建用于添加和编辑目的的表单，但对于仅显示数据的表单，我不熟悉如何去做。

<label>Check if they ever were a World Champion</label>
                        <input
                            type="checkbox"
                            name="champion"
                            defaultChecked={true}
                            value={champion}
                            onChange={handleChange}
                        />
                        <br></br>

这就是我在添加战斗机和更新表格时所拥有的：

return (
        <div>
            <h1>{list.attributes.title}</h1>
            <Link to={`/lists/${list.id}/edit`}>Edit This List Name</Link>
            <ol>{list.attributes.fighters.map(fighter =>
                <li>
                   <p>{fighter.name}</p>
                   <p>{fighter.alias}</p>
                   <p>{fighter.nationality}</p>
                   <p>{fighter.division}</p>
                   <p>{fighter.stance}</p>
                   <p>{fighter.height}</p>
                   <p>{fighter.reach}</p>
                   <p>{fighter.status}</p>
                   **<???>{fighter.champion}</???>**
                   <p>{fighter.win}</p>
                   <p>{fighter.loss}</p>
                   <p>{fighter.draw}</p>
                   <p>{fighter.ko}</p>
                </li> 
            )}</ol>
        </div>    
    )

这个片段来自我的 ListCard，用户可以在其中看到他们特定列表的战士，但不能在此页面上编辑该信息。

标签： javascriptreactjsreact-redux

解决方案

您是否正在寻找一种禁用复选框的方法？所以是的，那么你可以通过在你的元素中添加“禁用”来做到这一点。或者如果你想用条件来处理它，那么你需要从 reactstrap 导入输入，然后你可以通过添加 disabled=true 或 false 来做到这一点。

安装软件包：

npm install reactstrap

并编写代码：

Import { Input } from reactstrap;

<label>Check if they ever were a World Champion</label>
                        <Input
                            type="checkbox"
                            name="champion"
                            defaultChecked={true}
                            value={champion}
                            onChange={handleChange}
                            disabled=true
                        />
                        <br></br>

推荐阅读